How to handle height responsive one page app

Hello,
I’m struggling with the height of the index page.
I have an app that have a hidden/showed group system, so no pages at all.
But I don’t know how can I make my index’s height responsive.

For the login layer, 1089px its too big, so there is a big gap.
But for the news feed layer it’s enough.

Plus, I have a fixed footer (floating group), so i’m quite confused for its position, its should be at the bottom, but when dragged to the bottom, the index’s height expands automatically…

How can I make the height responsive ? And the content scrollable

Thank you.

This is something Bubble really needs to consider fixing. Currently there are two options that I know of.

The first is to use custom CSS (there are forum posts with code you can copy and paste, but it hasn’t worked for me).

The second is to stack all of your elements vertically inside the editor. Your editor page height could be very tall, but it will not be like this in live. When groups (visible or hidden) overlap each other, it causes them not to vertically shrink.

4 Likes

Don’t forget to use collapse when hidden checkbox :wink:

2 Likes

The second option is quite smart, i’ll try it !
@Jici Ok !

1 Like

Hello, I’ve tried it, but the groups stay at their position. Example if I have a group stacked at y = 5600, There is a huge gap. I checked on all groups “collapse when hidden”

EDIT : The problem is fixed

  1. set checkbox for alert element “position the alert at the top”
  2. Check that no group intersect when vertically stacked, because it can creates a gap on live.
1 Like

Any better solution?

Hii, would u mind to share your editor, so I can see this solution in practice? I am struggling with this ans I still did not handle this issue :disappointed:

Thanks a lot

Hey there, the best solution is to add a group on the empty space at the bottom, then set is such that it is not visible on page load. Then on the group, check the box that says " collapse element height when hidden".