Single page app: height responsiveness, collapsing a hidden element wont work

Building a single page app. Everything is working beautifully except height responsiveness. One of the tabs is about twice as long as the others. So when that tab is not selected, it leaves a huge empty scroll on the other tabs.

How can I get rid of this empty space when switching tabs?

Post: Understanding Vertical Scrolling Elements in Bubble

Also I have videos on my platform that help with this. NoCodeMinute - New Videos Posted! 🎉

And… 🕐 NoCodeMinute - Free 1-Minute Tutorials for Bubble

Hope this helps. :blush:

1 Like

collapse height when hidden

make sure all groups are vertically aligned so tops touching bottoms

make sure no overlapping groups on the page

1 Like

I didn’t quite understand why the groups need to be vertically aligned.

Also, by overlapping groups, do you mean nested groups? As in, Groups inside groups?

This does not work for a while. I’ve been adding hidden groups inside the groups to collapse the height for the past few projects.

So that your spacing between the top of the page remains the same. For example group 1 is set in editor to Y value of 120px with a header element of height 60px Y value set to 0. There will be a space of 60px between the bottom of your header and the top of the group 1.

When you then hide the group 1 and want group 2 to be shown and maintain that 60px space between the bottom of the header element and the top of group 2, this is why they need to be vertically aligned. If you don’t want to maintain the same spacing, don’t vertically align.

No, I mean overlapping. So if a group 1 has a height of 200px with Y value set to 0 and group 2 has a Y value of 100px there is an overlap.

1 Like

I’ve been having a few different bugs with collapse height and have needed to do the same. Most of the time for me it is working though and it is only with more complex set ups that I’ve needed to add the hidden group.