Group elements shifting upwards - outside the screen

shay152 · 2024-11-10T18:33:16.327Z

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.

pattokane · 2024-11-10T18:44:06.305Z

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

shay152 · 2024-11-10T20:03:59.526Z

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.

image1568×197 25.7 KB