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 ?
@J805 My responsive expert, maybe you’ll see the issue source
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!
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. 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.
@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?
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.
Thank you for your time!