I’m making a single page app and I want to get rid of any extra space on the bottom of the page. I would also like to have the user start at the top of the screen every time they switch groups.
I’ve already tried stacking each of the groups right on top of each other and collapsing their heights when hidden. This works with the empty space on the bottom, but adds empty space to where the first group was & the user then has to scroll down to the next group.
I have some groups within groups & I was wondering if that is what has been causing the problem.
If anyone could help me get this sorted out, it would be MUCH APPRECIATED !!
Hello,
Sam here, with Bubble support. Based on your post and the lack of references to container layout types, it sounds like you are using the legacy responsive engine.
On legacy responsive, nested groups can have a big impact on collapsing properties, so my gut instinct is that you are on the right track with what you believe is wrong. The technique described in your second paragraph of “stacking each of the groups right on top of each other and collapsing their heights when hidden” is the best approach to collapsing groups and responsiveness on the legacy responsive engine. If you are still noticing space up top, double check all of the parent groups and nested children, and make sure that each group is set to “collapse when hidden.”
If my assumption was incorrect and you are using the new responsive engine, this “stacking” of groups should happen automatically as long as you have the container layout set to column. From there, you just need to make sure each group is set to collapse, and things should work as expected.
Let me know if you have any questions about this!
Hello & thank you. @sam.morgan
Yes, I’m using the legacy responsive engine.
All groups are set to collapse when hidden (parent & nested included). The first group’s y-coordinate equals 0 and is perfect. However, when it’s hidden, there is white space where the first group was & you have to scroll down to see the next group.
Do I need to stack the nested children groups too?
Or is there anything I need to do in terms of ordering which groups are stacked first?
Thanks for the additional details! Yes, it is good practice to stack every single conditionally visible group that you have regardless of where it is nested. In general - overlapping groups on legacy responsive will create bugs with the ability of other groups to collapse. Ensure that all of your groups have their own space in the editor. The only reason that a gap would be appearing is due to another group that isn’t collapsing overlapping with the one that is. If you’re still having trouble, feel contact support@bubble.io and we can take a look at your specific app to see if we can pinpoint the issue!
How can I share my app’s editor?
You can share it in an email with support@bubble.io by copying the link of your editor from the address bar of your browser and pasting it in the email!
Ok, Thank You very much For your time !
1 Like
