Reverse column in visual editor

Hi!

I have this column:


How is it possible if I want to reverse the column order.

What css class should I add, or what should I add to this?
Please let me know, thanks!

Hey @radikris there are a few ways you could achieve this, but it might be helpful to know your exact use case?

I assume this is something for responsive design, e.g. stacking in reverse order at a certain breakpoint. If that is the case, our Column element has a Reverse columns when stacked toggle under the Advanced Options section of the option tab:

GIFGIFGIF

If this is not to stack the columns, the easiest way would be to use flex-direction in the custom CSS window. Our Column elements use flex-box for styling, and the parent wrapper has a class builder-columns already applied out of the box. If you want to change the order, you could use something like:

.builder-columns {
  flex-direction: row-reverse; //or column-reverse
}

to acheive the same effect. Try either of those out and let me know if one works for you!

Hi!

Yes, the global css worked, but maybe that not my usecase.

I have a symbol, a hero:
inside a column: left text, right image,
and I have a model entry with a boolean reversed, and I would like to bind dynamically this css to my column

Something like:
If the ‘flexDirection: state.data.isReversed ? row-reverse : row’, or something like that, but if I select the column in the layers, and add the flexDirection to row-reverse it is not the expected behaviour.

How could I solve this with this type of dynamic binding?

Thanks for your help @TimG , always appreciate it!

@radikris the easiest way for this I think is again to use the global CSS since we dont directly have access to classes and styling of the builder-columns class within the UI.

What I did, was on the Columns parent, I put a conditional data binding to set a class on the Columns element based on whether isReversed is true or not, something like:

state.isReverse ? 'reversed' : '';
Screen Shot 2022-03-01 at 3.59.45 PM

This will add the class reversed to the element if isReversed is true and nothing if false. From there I just updated the global CSS I mentioned above:

.reversed .builder-columns {
 flex-direction: row-reverse;
}

I made the update to you herosymbol NEW content page, check it out and see if that works for you!

worked like a charm, thank you very much!

@TimG A little help for this again, as you can see the reversed is worked, but the gap between the columns would not goes between the heroes. it will stay as a left padding but it is not on the right side anymore. how can we fix it?

Hey @radikris I think for this you would have to again rely on the custom CSS. You could put something like below:

Screen Shot 2022-03-03 at 2.36.03 PM

test it out to find your exact layout