Flexbox - Align to Parent Elements positioning

With flexbox align to parent, if the elements that are inside of the container do not have enough width, they begin to ‘cover’ each other. Seems like the default behavior is that the elements on the right will be ‘on top’ of the elements on the left, effectively covering them and making them not visible.

How do we dictate which elements should cover which? I don’t want the right side elements to cover the left side elements. I want the left side elements to cover the right side elements.

Got it…conditionally change the layout and change the nonant of the right side elements to be in the left side nonant of choice.

EDIT

NOPE, that doesn’t work, because for some reason now, the elements on the left side cover the elements on the right side.

Bubble Bug Report being submitted.

Hey @boston85719 :wave:

I think ‘bring to front’ still works in this case. Have you tried that? Let me know. :blush:

1 Like

You can also use the element tree with the new ‘drag & drop’ feature to set the Z-index of elements inside Align to Parent groups (the Z-index is sorted in ascending order - i.e. the elements higher up in the element tree have lower z-indexes, those lower down have higher z-index so will appear on top).

New Responsive [beta] Drag and Drop in Elements Tree - Announcements - Bubble Forum

1 Like

Thanks @adamhholmes

When I sent the bug report I stated there was no clear way of setting a z-index. Didn’t know the order in the elements tree now helps with that.

This is doing what I need it to now.

1 Like

Thanks @J805

I ended up first trying the z-index in the elements tree ordering mentioned by @adamhholmes and that is working as needed. Using the ‘bring to front’ and ‘send to back’ options when right clicking the element in the element tree is moving in the element tree as well, so seems like either method will work, to drag and drop or right click to select bring to front etc.

2 Likes

Glad it worked! :blush:

1 Like