Perspective - Numeric input field invalid style class not applied

[davee_s]

Hello guys, I have a problem on Perspective, I'm using Ignition 8.1.35, I created a numeric input field, configured minimum and maximum bounds and the I created a style class to be applied to some input fields when the value is invalid (out of bounds).
However the style class is never applied to the input field (color of border and box-shadow should change). I tried also to set base style and not on element style [invalid] but it doesn't change.
The only way to apply is to set in the component style value by value and not use a style class

[HelloWorld]

You could try using the stylesheet in the Styles folder, for example:

.psc-background {
	background-image: linear-gradient(to right, rgba(265, 179, 71),rgba(240, 169, 60));
}

Then I would just type background into class.

[Transistor]

I think you just need to,

• create a style "InvalidNumber" and set the Base Style properties as you require for the invalid condition.
• reference that style class:
  inputBounds.invalidStyle.classes : InvalidNumber

The style will only be applied when the number is out of range.

Why? CSS invalid is for when the document element is invalid. You're setting the CSS for a valid document element with an invalid value and that's a different condition.

[davee_s]

I tried but still not working

[Transistor]

Your screengrabs seem to show a correct configuration.
Is the style class actually in the Components folder? Double-check by re-selecting it from the classes dropdown. (Case matters.)

Other comment: Numeric fields should be right-aligned so that units, tens, hundreds, etc., line up vertically. e.g., gui design numeric entry alignment - Google Search.

[davee_s]

@Transistor

Your screengrabs seem to show a correct configuration.
Is the style class actually in the Components folder? Double-check by re-selecting it from the classes dropdown. (Case matters.)

Yes, it is in Components/InputInvalid.
Is it possible that style isn't overrided because I have a custom theme and edited .input classes in css files?
In case I tried also to add a custom CSS class :invalid and set the same properties but still doesn't work

[Transistor]

Try commenting out any CSS that might affect it.

/*{
...
}
*/

[davee_s]

Is the :focus that doesn't allow to apply invalid style.
I commented that and now works, but how can I keep both styles?

I renamed style to InputField, then set baseStyle to default (empty) and set properties for focus elements state and invalid, then added the class to style (generic) components but only focus works...

[Transistor]

The Element State [Invaliid] doesn't do what you want because the component is valid as discussed before. It's the value that is invalid.

I think you are correct that the CSS stylesheet is overriding the inputBounds.invalidStyle class. I suspect that there's a way around this by injecting the CSS !important rule in the right place - but I don't know where.

[davee_s]

I tried to do some tricks like use another CSS class to set :invalid on inputField with !important but didn't work. Tried also to add 2 different classes, one for focus and another for invalid value and nothing... Seems like focus always overrides invalidStyle. If I disable focus style the invalidBounds always works but I don't find a solution to keep both working

[victordcq]

Try this on your selected style, you'll have to keep this :not updated if you change your other class name

.ai_inputField:not(.psc-Components\/InvalidInput):focus

.ia_inputField:not(.psc-invalidTest):focus{
	border: green solid;
}

.psc-invalidTest{
	border: red solid;
}

Btw you should add custom css in the stylesheet.css, not by editing the css files. Those changes might dissapear on update.
https://docs.inductiveautomation.com/display/DOC81/Style+Classes#StyleClasses-EnablingtheAdvancedStylesheet

[davee_s]

Thanks a lot @victordcq it worked.
I decided to edit directly .css files because I created my own theme so a lot of things I prefer to edit and not to override with a lot of !important

[Transistor]

@davee_s

I decided to edit directly .css files

The default themes will be overwritten on Ignition update or re-install.
You can prevent that using the CSS @import instruction in your own theme file.

https://docs.inductiveautomation.com/display/DOC81/Creating+and+Using+Custom+Perspective+Themes

[davee_s]

Yes this is what I have done. I created a folder into %installDirectory%\data\modules\com.inductiveautomation.perspective\themes and copied all .css files from default theme light to a new custom theme, then I edited and added extra css code to customize the appearence of components and other.
I have tried now to update to 8.1.36 and the custom theme has been kept, fortunately

[Transistor]

@davee_s

... and copied all .css files ...

I dont' think that's quite what IA are recommending. You won't have the benefit of CSS for any new controls or features in future releases.

The @import method uses the default CSS through the @by as a base and your rules (which follow that line) add to, or override the default CSS. You then end up with your own theme files with relatively few lines to maintain.

[davee_s]

Mmm interesting, so what do you advise? To @import all default .css files from a default theme and then create only 1 .css custom file to add customizations?

[Transistor]

Yes, I'd do it as recommended in Creating and Using Custom Perspective Themes - Ignition User Manual 8.1 - Ignition Documentation.

If you offer your users light and dark mode then you would need to do that twice. I have generally used the default light and dark themes and built-in theme colors so haven't had to do this much. I did find that most of the charts (all built on AM Charts components) don't support CSS variables and so I had to create some session variables for light and dark themes. I created an expression binding on these to switch the colour depending on the selected them.
e.g., A chart pen needs to be dark for the light theme, etc., so the expression would be like:

if(
    left({session.props.theme}, 4 = "dark",
    #e0e0e0,   // Light color.
    #202020    // Dark color.
)

I bind the chart colors to the appropriate session variables.

Now if I create my own themes I just have to make sure the dark ones' names start with "dark" and my expressions will work.

[davee_s]

Oh, so now I need to compare all differences from default light theme and my custom theme .CSS files and then paste only the differences in a new .CSS file that will be my custom theme

[Transistor]

Correct.

That'll be easy though because you will have put a little comment on each style that you edited.

[davee_s]

Moved now to only one .CSS file with @import the default light theme. Thanks for suggestions