Conditionally enabled fields have added CSS element.style that changes font color

  • 1
  • Problem
  • Updated 3 years ago
  • Solved
I've got a few checkbox fields in a field editor. Two of them are conditionally enabled. Because they are conditionally enabled, they have an extra bit of CSS applied to them
element.style { rgb(0, 0, 0);}
I assume this is because when they are disabled, this changes to 
element.style {rgba(0, 0, 0, 0.298039);}
to allow for it to look disabled. 

However, I am using the Lightning Design theme, and my basic .nx.basicfieldeditor-item-label css has a color: #54698d, so these conditionally enabled options look different even before they are disabled. 

What could I do to make sure that my item label when enabled has the color #54698d?

In the screenshot below, Tax & Judgement Liens and Federal Tax Liens are the two conditionally-enabled fields. 

Photo of Jack Sanford

Jack Sanford, Champion

  • 8,322 Points 5k badge 2x thumb

Posted 3 years ago

  • 1
Photo of Peter Kong

Peter Kong, Employee

  • 440 Points 250 badge 2x thumb
Hey Jack! 

Yeah this one's a bit of a hassle... while this issue gains some attention for patching up, this hacky Inline CSS c/p should work out (forgive me for the usage of !important...):

.nx-basicfieldeditor-item-label[style="color: rgb(0, 0, 0);"] {    
   color:#54698d !important;
}

This will only target the field when its style is being defined to be black by the Skuid's backend. Let me know if this is helpful!

Regards,

Peter
(Edited)
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,322 Points 5k badge 2x thumb
Works like a charm! Thanks Peter!

for the record I used
.notblack .nx-basicfieldeditor-item-label[style="color: rgb(0, 0, 0);"] {    
   color:#54698d !important;
so that I could add the notblack css to just the two fields I wanted, in case this changed things I didn't want changed, especially because I'm using this field in a page include. 
(Edited)
Photo of Thimo

Thimo

  • 1,280 Points 1k badge 2x thumb
When .notblack is the class of your checkbox field the following CSS should work. It goes on the enable/disable status of the field rather then an existing style attribute.

.notblack [type="checkbox"]:disabled + .nx-checkboxlabel {
   color:#54698d !important;
}