What is an actual working method to get page height to dynamically match visible content?

[fayewatson]

Thanks so much, @louisadekoya! I’m glad you asked about this, and I think I just got lucky trying out the floating groups set up! That is a really great point regarding the repeating groups inside the floating groups as well. I don’t know if there is a Bubble way, or perhaps a CSS trick to get the page to extend past the floating group (I’m assuming there may be though!).

As a workaround for now, I set the floating groups to extend the width of the page in the editor with the red background color, and placed the regular groups within them. This way, the floating group containers look like the ‘page’ and will always extend the full height and width of the browser (it’s not fixed-width), and the inner group ‘pages’ are fixed width:

Preview: https://louisforum.bubbleapps.io/version-test/pageheight2
Editor: louisforum | Bubble Editor

For example, here Group C has an outside FG container (red) that is responsive and extends the width of the page, and Group C is fixed-width, centered inside:

Then in preview mode, the FG container will expand the length of the white group inside, containing repeating group, so there isn’t any page cut off halfway through:

[louisadekoya]

Thanks a lot, @fayewatson. This is a clever workaround. I have quite a few groups in my actual app, so I’ll have to test it out on a copy first. Thanks again for taking the time to look into this. Much appreciated.

[gf_wolfer]

In example 1, things seem to be resizing fine and the page is shrinking in height when going from Groups B or C to Group A.

But I think you are referring to having the smallest group to always match the Viewport height? If so I think this would take some custom CSS, but not too sure

[bwvemma]

I feel there is enough Bubblers requesting/wishing they could control an Element’s height using % or vh that maybe this feature could be sponsored and paid for if enough people chipped in. I think it is a crucial feature currently holding Bubble back a bit in regards to building truly responsive Apps especially when you view an app on 4k monitor down to smartphones, controlling height with px only just doesn’t cut it. None the less I still LOVE Bubble.

[fayewatson]

No problem at all, @louisadekoya! Not to go overboard, but you would actually only need that second workaround for FG ‘pages’ that have repeating groups in them. Otherwise, you should be all set just switching groups to floating groups!

[louisadekoya]

That’s very true @fayewatson.

[louisadekoya]

@gf_wolfer

But I think you are referring to having the smallest group to always match the Viewport height?

Yes, I guess this is what I’m after. I’m afraid I don’t know my viewports from my screen heights, but I’m learning Thanks again.