Cannot get 100% height to work

[Pat]

Hey everybody,

Going crazy here… I have a page with multiple reusable element which get shown depending on states. Even though I set everything up to “Fixed height = 100%” I constantly get super long pages with long scrolling (however there is nothing to show) How can I force 100% viewport height? I cannot work with fixed numbers as my app is supposed to work on mobile and desktop.

The new responsive engine is just so much “Trial & Error” because of lack of documentation and best practice examples by Bubble…

[sudsy]

@Pat

How can I force 100% viewport height?

Hi @Pat,

Don’t know if it’ll suite your needs, but here are a couple examples…

• 100% fixed height sidebar
• 85% fixed height scrollable RG

In the second example, just change the height of the containing group from 85% to 100%.

-Steve

[Pat]

Thank you Steve. Do you know if it makes a differen whether I choose: “Fixed height=100%” vs. “Minimum Height=100% Maximum Height: Inf” Like in your example? Is that the resolution to my problem? Will play around with it but wanted to hear your views on it.

[sudsy]

@Pat

Do you know if it makes a differen whether I choose: “Fixed height=100%” vs. “Minimum Height=100% Maximum Height: Inf” Like in your example? Is that the resolution to my problem?

It likely depends on the context. As you noted, there’s a bit of experimentation involved, and there’s often more than one way to go about it, but it all depends on the UI/UX you’re wanting to achieve.

Here’s a an extended scrolling RG that’s nested within a group set to scroll when content overflows. It’s the group (not the RG) that’s set to fixed 100% height, but min/max height also work in this simple example because the page itself is the group’s parent container.

If you have additional detail or screenshots, it might help others make suggestions for you.

-Steve