Group elements shifting upwards - outside the screen

Need help App Organization
1

I’m encountering a challenging layout issue in my Bubble app that I could use some help with. Here’s the situation:

Layout Structure:

  • Root structure: Row container (for sidebar + main content layout)
  • Group main: Has 80px top margin (needed for floating header)
  • Multiple page groups within main_frame

Current Issue:
The main content group is shifting upwards and breaking the layout, especially with longer content. The issue gets worse as content grows.
I tried creating a new group (without the top margin) - still the same. The issues occur on all the pages where the text is long. This is new - as nothing major was really changed from my end.

Current Settings:
Group main:

  • Parent container type: Row
  • Container layout: Column
  • Top margin: 80px
  • Vertical alignment: Top

What I’ve Tried:

  • Adjusting container types
  • Various margin/padding combinations
  • Different alignment settings

Expected Behavior:

  • Page height should adjust to content
  • No upward shift of content

Any one has any ideas? Feeling lost.

2

Hi @shay152 , how are you?

It sounds like you have something might not be fitting to height quite right or something is not collapsing when hidden.

You might have to go through every element and find what is doing it as it is really hard to pin point without being in there

1 Like
3

Ok FOUND IT!
This was tricky.
At the end it was html loaders I added that broke things. That was so frustrating to find.
The image is a comparison between the working version (production) to the dev broken one.

image
image1568×197 25.7 KB