Style of Disabled Components

Ignition
,
1

Can anyone tell me how to change the style (eg. foreground and background colours) of a component (ie. dropdown list and checkbox) when they're disabled? I want to use the same screen for different roles of user, but make some fields read-only for anyone but management roles... and when I disable those components, they're SO grey that they're hard to read easily. Text boxes have an editable property (which keeps the field easily readable), but these other controls do not seem to have anything similar... Can anyone suggest a way to change this disabled style (or some other workaround)? Using Vision under Ignition 8.1.18 Thanks in advance! :slight_smile:

2

You can make a disabled style and enabled style and use an expression binding on the styles class property of the component like this:

image
image1353×597 67.6 KB

3

Except I'm using Vision... :slight_smile:

4

I can't be very specific, but here are the steps I'd take:

  • identify what css variables are used in the disabled components. Use the dev tools for this.
  • in the stylesheet, add a css rule that targets disabled components. Something like [disabled] should target all of them. If you need to be more specific, ie target only input components, something like [data-component^=ia.input][disabled], or .ia_dropdown[disabled] to target only dropdowns.
  • in that style, edit the different variables used by disabled component to match your needs

And that should be enough.

Alternatively, if the variables used by disabled components are specific to disabled components (I see there's a --label-disabled), the simplest way (and the right way) would be to just override these variables, ie

:root {
  --label-disabled: pink;
}

You can mix and match these 2 methods (and some others too...) to be as specific of generic as you want/need.

edit: Damn, I missed the vision part and you reminded us of this right when I was finishing my post.
Eh, sorry, I can't help you there.

5

You can use the Style Customizer to do this.

6

For a checkbox, the text property could be left blank, and a separate label could be used. For opaque components, I imagine the background color could be bound to the enabled property to provide the needed contrast while the component is disabled.