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!
Hi!
I have this column:
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:
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' : '';
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:
test it out to find your exact layout