Style Class Not Applying

Ignition
1

Why are Style properties that are in my styleclass not being applied to my component. Causing me to have to add in the properties manually on each component,

image
image381Ă—146 7.87 KB

here is a screenshot of the styleclass with those properties in it,

image
image740Ă—750 34 KB

2

There's a binding on that classes key, are you sure it's applying the same class? And is it applying the other styling?
Have you checked dev tools to see if it's applying them but being overridden?

3

Yes, the binding switches between identical classes minus the the active state. I disabled the binding to test as well. Some added context, the properties I am trying to add “aspectRatio” for example, I can not find aspectRatio going through the Style Class UI in the designer, it also is not on the property list when manually adding properties. properties that do appear on the UI/List get applied correctly through the styleclass. I had to manually go into the styleclass json and add “aspectRatio”.

I would understand if aspectRatio simply was not a valid property, but the fact that it correctly applies when I manually add it to a component has me scratching my head on why it wont apply through the styleclass.

4

I didn't know this was a thing tbh. I think I assumed they were stored as css files. That could be the reason :man_shrugging:

What I normally do is, if there are only a few extra props that aren't in the style class editor ui, add them into something like background image which I rarely use, by using:

; aspect-ratio:1/1; height: 100%

The first ; closes the prop value you're adding it into, and the rest need to use correct css prop names (no camelCase)

or, if there are more, create a blank style class and then use the adv stylesheet to define the class instead. Note: the blank style class is only there so that it appears in the dropdown list when selecting style classes, as well as visible in the Styles section. However it's not technically needed to work.

.psc-Buttons\/OldScadaStyle {
  aspect-ratio: 1/1;
 ... All your other props...
}

(I prefer the styles to be defined fully in one place or the other, not a mix of both)

1 Like
5

Ok I will try and remake the styleclass in an advanced sheet. Those can handle element states right? Hover, active, etc?

6

Yes, it's just a simple css sheet.

2 Likes
7

For...reasons, I can't really provide a good justification for, the way style classes work is that they're an arbitrary JSON element set, and anything not in our hardcoded list of "known" attributes is retained in the JSON but not actually emitted into the final stylesheet.
The supported list of attributes is this:

1 Like
8

How do you apply the style to a component? I've tried .psc-xxxx, psc-xxxx and xxxx, but I don't see any changes on my button. All I am doing is changing the background color.

Edit: never mind, I missed the lowercase letter, thinking it was uppercase :man_facepalming:

1 Like