Reusable Element Placement Off

I’m using reusable elements in a design prototype and they seem to be not rendering accurately on preview. In edit mode it looks correct, but on preview the layering and sizing goes off.

Any help greatly appreciated, thanks!

My best guess is that there is an issue with your responsive layout. Try adjusting some things under the responsive tab in the editor and try it again in preview/live mode.

@andrew.fox - could you post a few side-by-side screenshots of what appears to be off between editor and preview rendering? That’d help narrow things down.

Thanks @whitetigerwolfthe1st @dan1

You can see the Edit vs Preview views below. The height of the blue header is explicitly 50px, so not sure why thats changing, and the layering is wrong.

Part of the reason the blue box on the top is appearing longer than it should be is because your elements on the right do not have enough “breathing room” to stay on the same row. One of the buttons is being pushed below the other elements, which is causing the container to become longer.

If you adjust the minimum width for a container group for those elements, then you should be OK.

As far as layering (er, arrangement) goes, you can use the send to back / bring to front actions to (somewhat arbitrarily) dictate what is on top and what is on bottom.

SIgh. I see what happened. A co-worker set the background of the header as a floating group and didn’t tell anyway. Deep. F’ing. Sigh.

A good Bubble habit I recommend is to label your containers diligently. (Bubble does some auto-naming for you, but I recommend going beyond that). That way, as you’re looking through the app, those things jump out a bit more easily.

Ex. Floating_Group-Header_Main, Popup-Signup_Login.

Thanks @dan1, and totally agree. Teammate should have done that and did not. Joy. :slight_smile:
Thanks again for your help!