Page height not reducing when groups collapse

Hello all,

I have successfully set up some groups to show/ hide correctly and they collapse properly relative to eachother.

The issue I have is that when these groups are collapsing, they are creating empty space on the page at the bottom of all my groups.

Any ideas why this would be happening?

ezgif.com-gif-maker

I’m guessing you’ve got all your groups overlapping on the page (i.e. they are all occupying the same space in the editor).

You need to ‘stack’ your groups, one above the other (without any overlap, not even a single pixel) in order for the page to dynamically resize after a larger groups is hidden.

@adamhholmes is exactly correct. It can be very frustrating if you have a single-page app as your page can get very very long.

@adamhholmes @StarrK_Designs That is one way, but it is not at all necessary and in my experience becomes unmanageable in the editor if you have a large one page app.

@ben12 You can stack your groups, or you can layer them using the method below.

Instead of stacking, you can layer your groups on top of one another, as long as the groups are all of identical height. So every “page” of your one page app should be a group of standard height that fits perfectly on top of all the other pages. The standard height should be higher than any of your content will be. For example, in my app, my standard “page” group height is 4020px, my tallest page’s content is only about 2000px in the editor. Make sure only one if these “page” groups is visible at a time while your app is being used.

Now you’ll still have the problem of each page having different amounts of content and needing to be different sizes other than the standard size. This is solved by adding “resize” groups at the bottom of each “page” group that go from the bottom of each page all the way up to the bottom of the “page” group’s content (with a little margin as desired). The “resize” groups should be set to not visible and collapse when hidden.

@aj11 I’ve tried building that way and sometimes it works and sometimes it doesn’t. Unfortunately, that isn’t a good thing for my clients which is why I avoid it.

Yes they are already all stacked - see gif below, I will check to see if there is 1 pixel overlapping somewhere and report back

ezgif.com-gif-maker (1)

OK I have checked and there are no overlapping groups so back to square one - any help would be much appreciated and happy to pay someone £20 to solve it for me via video.

Thanks

If you want to share a read only link to your editor I’m sure someone could take a quick look to see if there’s any obvious issue.

Here is a link to the editor: Benproject1 | Bubble Editor

there are some hidden groups in Step 1, Step 2, Step 3

As far as I can see you haven’t got Collapse Element's Height When Hidden checked on any of your groups (apart from the group containing the card input fields), so try adding that to the main elements as well.

Although the bottom of the page is staying consistent in relation to the right hand column (the floating group) - so that’s probably why the space is not collapsing (it’s staying the same distance from the bottom of the floating group).

So you might need to add a hidden group at the bottom of the page with the sole purpose of collapsing when the card details group is not visible if you want the bottom of the page to change its position relative to the right hand column.

So it looks like i needed a group as you said across the entire space below the floating group to collapse

Thanks !!

1 Like