Container 100% height doesn't work!

[gus]

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:

Now see the container with the strange behaviour:

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

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

[adamhholmes]

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]

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

See:

100% of the screen:

[adamhholmes]

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]

Also he has a top margin there as well.

[jacob2]

Are there any children inside that group?

[mitchbaylis]

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)