Responsive problem with reusable element

[vnihoul77]

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

Any idea ?

[vnihoul77]

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

[J805]

Hey there! 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!

@j805 www.NoCodeMinute.com

For All Your No-Code Education Needs:

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

[vnihoul77]

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…

[J805]

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

[nomorecode]

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

[vnihoul77]

@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

[nomorecode]

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

[vnihoul77]

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

[nomorecode]

indeed

[vnihoul77]

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!