Responsive problem with reusable element

Hello,
I have a reusable element (with hiddens group inside) placed on my page :

Reusable in blue and RG in yellow

On page load everything seems correctly placed:

But if I show hidden groups, this happen (even if I hide them again)

And my groups are collapsing :slight_smile:

Any idea ?

@J805 My responsive expert, maybe you’ll see the issue source :slight_smile:

Hey there! :wave: I think it might have something to do with your overlapping elements. Check out Bubble’s documentation on Responsiveness and overlapping elements:

Overlapping elements move together: they expand or shrink together (unless one of the elements is set to fixed width or has a maximum width). In other words, overlapping elements both break, or neither breaks, and they are both shown or neither is shown by any show/hide rules.

I always try to stack (like legos) all of my elements instead of overlapping them. Then showing and hiding certain elements with set states are simplified.

Hope that helps! :blush:

@j805 www.NoCodeMinute.com

For All Your No-Code Education Needs:

  • One-on-One Tutoring
  • eLearning Hub
  • Video Tutorials
  • No-Code Classes

Thanks for your answer, I just check the documentation again and find nothing that can help, I think the issue is related to the reusable use…

Oh ok, sorry about that. :blush: Do you have elements overlapping though?

I can’t emphasise this enough, always ‘ALWAYS’ stack your groups, even if/when hidden. Then all page elements sit nice and puka.

1 Like

@J805 No… on the reusable as well as on the page every element are stacked one above the other…

@nomorecode Maybe I’m wrong but I think all my elements are actually stacked? I maybe use the wrong term on the first topic


@vnihoul77 I can see some minor over-lapping, even this can cause issues as bubble classes these as their own unique parent (container).

@nomorecode You’re talking about the second screenshot, right?

indeed

Ok! I solved the problem after hours of trying lot of things, and the solution was simple … I didn’t leave the blank space of the reusable on my page.

Not working


Working

Thank you for your time! :wink:

1 Like