Single Page App - issues with page height

Need help Mobile
1

Hey Bubblers,

I need some help as I’m attempting to build a single page app and keep running into the same issue, page height. I’ve attempted to rebuild the layout a number of times and the page seems to consistently display a HUGE amount of additional space (I’m talking 1000’s px).

I’m currently at a loss with how to fix this.

The background of my setup:

Once a user is signed up, then are taking to the App page.
The App page is one LONG page (15,000px height and counting) as it contains all of the groups that relate to sections (there are to be 5 main sections of the app). These Section groups are set up to only be visible when certain parameters are in the URL. Otherwise they are hidden and set to collapse when hidden.

Within each Section there are a number of groups (content groups), again are hidden on page load and made viewable based on URL parameters, these are also set to be collapsed when hidden. Within each Content Group is all the content for that part of the section.

I’ve created one Section so far and it all works perfectly in terms of displaying the specific Section and then Content Groups in order. This also resizes the Section correctly not resulting in any additional/incorrect spacing.

The issue is at the bottom of the Section there is a HUGE scrollable section of the Page which I can’t seem to fix. So far I’ve tried:

  • Checked all Section groups are set to collapse when hidden
  • Checked each Section group is aligned with the next but not overlapping
  • Changed the height of the page to varying numbers (sometimes it reduces the amount of additional space, othertimes it cuts off the content even though the number input for the height should leave lots more space.

I’m really at a loss and don’t want to think about rebuilding the app AGAIN when I want to continue moving forward with the rest of it.

Any help or suggestions on what could be causing this behaviour and/or best practices for single page application building on Bubble would be most appreciated.

Thanks all,
Mike

2

Without seeing your app editor it’s impossible to say what the issue is here, but if you’ve structured your page correctly to allow for dynamic page height then this shouldn’t be happening.

When set up correctly, the page height should resize (grow and shrink again) to fit the elements that are visible, so the fact you have extra space means it’s almost certain there’s a problem with the way your groups are set up and laid out on the page.

If you’re happy to share a link to your editor then I’m sure someone will be able to spot any issue, or even just a screen shot of your current page layout.

But if not, then double check ALL you group settings - it’s easy to miss one if you have a lot of groups o the page, so check none of them are overlapping, and they all have height set to collapse when hidden

3

Are you groups stacked strictly one below another? Or do you have any groups with overlapping spans? In other words, is the “y” for one group always greater than “y+h” for the immediately previous group? If there is overlap, it may result in the spacing that you can see.

In the preview, you should be able to click at the bottom to see which group is extending the page height. There is a small link to see the responsive boxes just below the button in the preview mode. When you click on a box, it will show you the name of that group.

1 Like
4

@adamhholmes @deadpoetnsp Thank you both for your replies.

I’ve been through every group checking the Y values and low and behold there was 1 group slightly overlapping the other which once fixed resolved the issue…my mind is blown.

Thank you both. Clearly I need to be even more vigilant when it comes to overlapping groups in future.

2 Likes
5

Yep, we’ve all been there :stuck_out_tongue_closed_eyes: - it’s easy to miss an overlapping group which can throw out the whole design!!

Glad you got it fixed.

1 Like