Hi ,
let's say I have flex container (row) and I use gap:8px property under the container style.
now I want to create a css class and define this gap in the class. I dont seem to be able to find it . under what category is it?
Have you tried in stylesheet like below?
.psc-Menu {
gap: 50px;
}
hi and thanks for your help 
I have tried stylesheet , but my question is how to achieve this if I just want to use the style class .
Oh sorry , are you trying to select gap property from styles available?,
if so, i havent seen gap property in the styles.
The gap style is not directly supported implemented by Style Classes. You can inject it, but the recommended approach is to use the stylesheet.
1 Like
To inject it you can add ; gap 8px (note the first ;) in any text field in the styleclass. But yeah this is not the correct way.
1 Like
When we developed the Style Class UI, we had the impossible task of developing custom UI for an what is essentially an extremely complicated language. Beyond considering which properties we would provide UI for from this ever-expanding set of properties (520 properties as of 2020), we had to determine which would need to account for location-specific settings (border-right, as opposed to border)
So we chose the most obvious and commonly-used properties. Unfortunately, gap didn't make the cut.
The "correct" way to manage this property at this time is to make your Style Class just like you would any other, and apply the other settings you want to be a part of it. Save the changes. Copy the Style Class. Paste this content into your favorite text editor. Add your desired gap property and value alongside the other values:
gap: 8px;
Copy the content from your text editor, and paste it back into Perspective > Styles. Delete the original Style, and rename the pasted style to have the original name.
1 Like
Is there any precedence applied between the Style Classes and the Stylesheet?
IIRC, both are compiled into a Style Sheet which is then included with the HTML files and loaded by the client. So if I were to create a Style Class and then create the same class in the style sheet (with the psc- prefix), then which would take precedence? Obviously whichever class definition comes last in the compiled stylesheet assuming that the specificity is equal, but which one is that? Is it component dependent?
In theory you should be able to use the stylesheet (assuming your Ignition Version has it available) to add the rule for the gap property without all the copy, paste, edit workflow.
All things being equal (specificity-wise):
The theme files will be applied, then the stylesheet resource, then Style Classes, then inline styles. In some places we allow for specifying styles based on different states or pieces, and those are applied last.
theme files > stylesheet resource > Style Class > inline
Update: I tried the pasting of a copied Style CLass and we apparently don't allow that. It appears the rule MUST be applied in the stylesheet.css resource, though you can specify it should only be applied to a specific Style Class (the odd \/ escape sequence is correct):
.psc-Menu\/blue-menu-item {
gap: 8px;
}
2 Likes
Good to know, so anything that is applied in a Style Class will take precedence over the stylesheet, unless some other mechanism is used to override it (e.g. !important).
Does inline mean styles added specifically on a property? For instance a specific table column?
"Inline" means anything applied to a property which is used to modify appearance, most commonly something like Component.props.style, but also sometimes values like Button.props.textStyle.
So you can paste any style within a stylesheet it just takes a little bit of formatting for it to pick up, you just have to make sure to wrap the style in }...{style}...{. But with this method any other style within this class will only take effect if it is located in the injected style, for instance if i wanted to change the background color i would have to instead throw it in }...{backgroundColor:red;}...{ for it to work
