Hi All, I’m able to do some wonderful things with Bubble but I’m still struggling with getting full-height groups. I can’t seem to get a page height to dynamically match the height of the currently visible group. CSS etc is not my strongest suit so I’m sure I’m missing something. Can someone please…

Thanks. It’s the no overlap limitation that makes this impractical for me and I suspect for most single-page apps with lots of groups within groups.

I haven’t experienced this problem because only one master group is visible at a time, and only one hidden/collapsing group is in each master group.

This is the template. [image] Bubble - Visual Programming Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

Thanks, I will take a look. A quick question in the meantime, please - can I assume that a ‘master’ group in this context is a group containing child groups of a similar height? Also, by non-overlapping, do you mean stacked on top of each other?

Yes, I mean master contains child groups (including the special hdden/collapsing group). Yes, not stacked on top of one another as the visibility of the master groups are mutually exclusive using “custom states”

@louisadekoya , I was testing around a few other methods today and I think I’ve found one that is consistent that allows you to overlap floating groups (set to float: nothing, so they behave similarly to regular groups!) Preview: [image] Bubble - Visual Programming Build stuff without co…

I think this was already covered here [image] Setting a group to be % of viewport height dynamically Tips One of the struggles with Bubble can be the dynamic setting of a group’s height, for instance having an element be 100% of the viewport height. Here’s how to do it: …

Thanks @AliFarahat , I referred to that post in point 5 of original post above. That method doesn’t quite do the job for me.

@fayewatson , this looks very promising indeed. I will test it. Curious as to why this would work for floating groups (float:nothing) and not for groups. I never use the nothing float as I assumed it was no different then to a group. One concern with this method is how it would work with Responsive, …

As noted earlier, I originally made every group the same length as the longest group and made them all collapse when hidden. Then placed a group within the shorter groups to collapse when hidden. This works, but you need to make sure you set up all the collapsing groups which can take a while to rig…

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

Need help

AliFarahat November 1, 2017, 7:03pm 15

I think this was already covered here

Topic		Replies	Views
Extra Vertical Page Space (not the debugger) Responsiveness	13	1382	April 10, 2020
Option to match page height to currently shown content Idea	19	3114	November 14, 2017
Changing page height based on group's height Responsiveness	3	880	March 11, 2021
I don't understand how page height and scrolling work Need help	2	548	February 16, 2019
Setting a group to be % of viewport height dynamically Tips	117	41143	November 11, 2024

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

Related topics