Container 100% height doesn't work!

gus · 2025-01-23T12:35:49.543Z

Hey bubblers, I am facing a strange behavior in one bubble app… when I try to set a container to 100% of the screen, it simply doesn’t work… the height goes far from 100% and I can’t discover why. This happens in all pages. This app was built using a template from Ez.

See how page is setup:

Screenshot 2025-01-23 at 09.30.321479×836 27.7 KB

Now see the container with the strange behaviour:

Screenshot 2025-01-23 at 09.30.451479×836 47 KB

Screenshot 2025-01-23 at 09.37.161565×792 49.5 KB

How it looks in test (Container is set to 100% min:

Screenshot 2025-01-23 at 09.33.263360×1880 190 KB

In that case, the container height is smaller than 100%, but in other pages it gets bigger, like 200%. Anyone have seen this?

adamhholmes · 2025-01-23T12:46:44.930Z

There is no way in the Bubble editor to set the height of an element in reference to the view-port.

When setting an element’s height as a percentage, that’s in relation to its parent container (not the view-port).

So height: 100% means the element will be the full height of it’s parent contains (whatever that may be).

If you want to use viewport height then you’ll need to add the CSS directly.

gus · 2025-01-23T15:15:24.630Z

I don’t get it, why does it work for other apps as expected?

See:

Screenshot 2025-01-23 at 12.15.462482×1492 266 KB

100% of the screen:

Screenshot 2025-01-23 at 12.16.183356×1878 171 KB

adamhholmes · 2025-01-23T15:30:45.423Z

If the parent container is the page, then of course the child element will be 100 % of the view port (or bigger, if the page height is more than the viewport).

Or if every parent container, up to the page, is set to 100% height.

jacob2 · 2025-01-23T18:08:31.996Z

Also he has a top margin there as well.

jacob2 · 2025-01-23T18:09:33.655Z

Are there any children inside that group?

mitchbaylis · 2025-01-24T03:03:48.282Z

you can get the viewport height using custom JS

just make sure to save it to a state on page load instead of dynamically referencing it - the dynamic reference can be glitchy if the page rerenders (the height changes)

system · 2025-02-06T12:36:00.463Z

This topic was automatically closed after 14 days. New replies are no longer allowed.