Perspective style editor and flexbox

Ignition
1

I want to create bindings for certain flexbox properties for common components based on parameters sent from embedded views or flex repeaters. The easiest way to do this would be bindings to certain CSS styles, and this works great for other CSS I need to trigger via expression bindings. But I don’t see that CSS for flexbox position properties (grow, shrink, basis, etc) as editable within Perspective’s style editor. While I can bind each individual position property, that’s so much less elegant than just using CSS to drive this.

Is there a trick to add CSS properties to a style beyond what the style editor in the designer UI displays?

1 Like
2

When I copy a style out from the project browser and paste in a text editor, it shows the actual CSS such as…

.psc-tagDisplay_wideEnum {
  margin: 0 2rem;
  text-align: left;
}

Can I just copy a CSS class and paste it right back into the browser somehow, and will that overwrite the properties for a particular element within Perspective? e.g. I can add flex-grow: 1 to try. However it appears I cannot paste CSS directly back into the styles within the project browser.

3

The correct way would be to use themes and adjust the css there.

Or if you want to be sneaky you can inject css into the background-color of a style class if you put that css inside }{ (yes faceing the “wrong” way)
(this might get removed later, but i really hope not)

}.psc-tagDisplay_wideEnum {
  margin: 0 2rem;
  text-align: left;
}{

image
image943×373 26.8 KB

4

Have you tried simply adding the desired flex props with inline style objects in the prop editor? You can manually add any css properties there, including flexbox props.

Screen Shot 2021-08-09 at 9.00.11 AM
Screen Shot 2021-08-09 at 9.00.11 AM701×557 58.9 KB

Just remember to use the camelCasing on your property keys. alignSelf instead of the usual align-self in css.

5

Hi @ray thanks for sharing that idea.

I ended up getting my component to rearrange based on parameters using only three simple expression bindings to change display of one flex object, grow of an adjacent flex object, and everything else (margins/etc) controlled via flipping a normal Perspective-built style class. But it’s encouraging to see we have more options at the inline level than we do with the css class editor pop-up.

image
image1034×722 63.3 KB

@victordcq I’m eager to try out your CSS injection trick sometime. Thanks for sharing!

1 Like
6

Good to hear you solved it! The inline styles can also be helpful in overriding style classes for on-off style variants. Our “cascade” of css application goes from: themes > style classes > inline styles.

Hope this helps you sometime down the line.

7

the problem with inline styles is that some components exist out of mulitple layered divs(or other things) and so the inline styles dont always work on those

1 Like