How to reverse group alignement (row/column) elements if CSS styles are not enough due to an intermediate Bubble container

Tips
1

Hi Bubblers, first post here after some months working and reading with you.

Several hours trying to solve it, but here it is how to reverse the alignement of group elements. Hope it can help the community!
image

OBJECTIVE:
In my case I have a row group with two group elements inside, white (off-white) and blue colored groups…

image
image1920×946 20.3 KB

…with the goal of moving the blue group to the left side of the white one (also changing its color, but not the topic we are focused on):

image
image1915×890 57 KB

SOLUTION:

  1. Add to the parent group…
    image
    …an ID Attribute name in the lower part of the Appearance menu:
    image
    Note that you should have checked this latter option first (Inside Settings > General):
    image
    image1802×135 7.54 KB

In my case it is conditioned as:
image

  1. Look for the HTML header input inside Appearance of your page, and change the flex-direction of your group to row-reverse:
    I tried it in so many ways with the following format:
<style>
#changeOrder { 
    flex-direction: row-reverse;
} 
</style>

and different functions like “direction”, “display”, “position”,… but the secret sauce is not the function you use.

The key is that we want to apply this change of order into a container that Bubble creates (red) between the Parent group (green) and the row elements (white and blue), not the parent itself.

image
image1120×178 30.4 KB

This is why I realised and used

#changeOrder > div.bubble-r-container.flex.row

in order to transfer the style to their “div.bubble-r-container.flex.row” child, as it does not have an id and I only want to change that one.

If you used…

<style>
.div.bubble-r-container.flex.row { 
    flex-direction: row-reverse;
} 
</style>

…you would change all rows in your page, not what you arte maybe looking for.

So the functional solution would be this one:
image

Maybe some of the experts here have a better method than this one, but I truly all posts related to this one and none of them said anything about this “middle-layer” container.

Hope it helps! :grinning:

1 Like
2

Did this post not work for you?

1 Like
3

No, due to the container I mention that avoids the main group style reach the elements.

Thanks for the reference btw!

4

You should only have 3 groups. Main container set to row layout and with HTML ID applied for reversing order of its child elements, which would be the only 2 other groups needed, the white and yellow group. There should not be a fourth middle layer group.

5

There is no fourth group, just those three, as mentioned in the post:
imagen

The fouth one is something Bubble creates, I haven’t found why yet.

1 Like