Responsive problem with reusable element

vnihoul77 · 2020-08-17T09:52:59.101Z

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

Reusable in blue and RG in yellow

image922×1254 110 KB

On page load everything seems correctly placed:

image768×1350 130 KB

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

image779×1435 131 KB

image815×598 66.5 KB

image759×409 49 KB

And my groups are collapsing

image809×340 24.5 KB

Any idea ?

vnihoul77 · 2020-08-17T10:38:26.753Z

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

J805 · 2020-08-17T16:20:43.927Z

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 · 2020-08-17T19:25:11.109Z

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 · 2020-08-17T20:46:18.673Z

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

nomorecode · 2020-08-17T20:56:47.996Z

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

vnihoul77 · 2020-08-18T08:05:13.373Z

@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

image802×266 26.5 KB

image836×366 27.3 KB

nomorecode · 2020-08-18T08:10:10.297Z

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

vnihoul77 · 2020-08-18T08:14:20.341Z

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

nomorecode · 2020-08-18T08:14:40.557Z

indeed

vnihoul77 · 2020-08-18T08:48:04.124Z

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

image815×528 19.2 KB

Working

image784×830 25.3 KB

Thank you for your time!