Forum Documentation Showcase Pricing Learn more

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

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.

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”

1 Like

@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:

Editor: (*The forum is adding *amp but the page is called “collapsing-groups”)

In this example, there are three floating groups (blue, green, orange). They all are not visible on page load and overlap beneath the buttons (the buttons toggle each fg):

Then there is a single collapsable group beneath the floating groups which stretches the length of the page, (not visible on page load), that collapses in height. This way, the collapse occurs once the page is loaded, but when the longer floating groups become visible, the page adjusts dynamically.

I’m almost sure this will work for everything as long as each group in the mobile app is converted to a floating group (float: nothing), none are nested, and the collapsible group stretches the length of the page. Let me know if this works for you too! :slight_smile:

2 Likes

I think this was already covered here

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, because floating groups don’t seem to, er respond well to the engine in my experience. But let me give it a go first.

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 right if it’s your first time. Not sure if it’s the optimal way or not, just a way that worked well.

Excited to hear how the floating groups or any others work out.

2 Likes

I also had thought there was no difference between the two. :slight_smile: I think it works for floating groups because when they are overlapping each other, the responsive settings of the fgs do not affect each other. However, if groups are overlapping, their responsive settings will interfere with each other and be difficult to manage.

As a comparison, here’s the exact same page setup with the floating groups converted to regular groups (the height doesn’t collapse in the same way):

I think the best bet might be to have the floating groups be the width of the page (or close), and then you can place any other elements inside of it and responsive should work as expected (Hopefully!).

1 Like

A quick update on this. Short version: still not quite there.

I have finally got around to trying the suggestions from @gf_wolfer / @robert and @fayewatson (thanks guys)

1. Using collapsible groups within equal-height groups
I tried this @gf_wolfer and whilst it does cause my groups to resize as I want, it doesn’t appear to adjust the size of the page itself. It is possible that I’m missing something but if you look here, you’ll see that for group A the page is still much longer than the group. What I want is for the page height to shrink (or extend) to match the currently displayed group.

2. Using float-to-nothing floating groups
This also comes close @fayewatson. I think it is incredible that you thought to even try this particular configuration. The issue with this seems to be that it doesn’t extend the page when the group is longer, especially when you have a RG that lengthens the group beyond the original page height. Please see here for an example - groups B and C.

Thanks,
Louis

1 Like

Thanks so much, @louisadekoya! :slight_smile: 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: https://bubble.io/page?type=page&name=pageheight2&id=louisforum&tab=tabs-1

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:

3 Likes

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.

1 Like

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

1 Like

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.

6 Likes

No problem at all, @louisadekoya! :slight_smile: 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!

That’s very true @fayewatson.

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 :slight_smile: Thanks again.

1 Like

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