When I edit a created canvas page, the edit frame height is way shorter than the actual page content.
So lots of content is outside the edit frame, making it invisible and hard to edit te page and the content.
I have no idea if this is canvas's fault or if it has to to with my components code or css somehow.
How do I troubleshoot this or fix this ?
There is no height: 100% on the html or body tag.
There are no console errors. I do see some notices roughly translated as 'unexpected value auto when parsing width attribute' in modules/contrib/canvas/ui/dist/assets/index.js but I dont think that is the cause of this problem (should a separate issue be created for that?).
The particular page of the screenshot has no css animations. If it is somehow the fault of the css of my components or theme, please tell me what css could cause these problems.
Are there ways to trigger a refresh/reload of the edit frame ? Just reloading the page does not fix anything. Changing the preview device on top left to Desktop or Large Desktop makes a litle bit more content visible but still more than 50% of my page is invisible because the edit frame is not high enough.
| Comment | File | Size | Author |
|---|---|---|---|
| #2 | canvas frame height problem small.mp4 | 5.07 MB | flyke |
| canvas edit height issue2.png | 129.81 KB | flyke | |
| canvas edit height issue.png | 779.63 KB | flyke |
Comments
Comment #2
flyke commentedAdded mp4 video instead of the earlier uploaded gif because the video downsizing and length cropping to be able to create a gif from it made the gif rather unclear.
Comment #3
flyke commentedComment #4
flyke commentedApparrently, I missed that my html tag had a
.h-100class (from bootstrap) which gave it aheight: 100%css property.Removing it fixed the edit frame height, as described in this issue:
100% height on body or html element breaks viewport height calculation