0

I have below code

<aura:component implements="force:appHostable" controller="controller" access="global" >
<aura:attribute name="allLoaded" type="Boolean" default="true"/>
  <aura:renderif isTrue='{!v.allLoaded}'>
    <div aura:id="xcont" class="slds-button slds-checkbox--button background-silver text-color-white">
      <label class="answears slds-checkbox--button__label">
      <ui:inputCheckbox aura:id="x" label="label" click={!c.voidJS}" class="text-color-white" />
    </label>
    </div>
  </aura:renderif>
</aura:component>

and I trying set text color to white or black with css but this is not working.

My css:

.THIS .background-silver {
        background: linear-gradient(to bottom, #FAFAFA 0%, #EEEEEE 100%);
        color: white;
    }
.THIS .text-color-white {
       color: #FFFFFF !important;
    }
4
  • Adding !important to the .background-silver styles doesn't help?
    – Keith C
    Apr 20, 2017 at 8:35
  • Unfortunately no. Maybe one of class what I use disturb with this.
    – JJanek
    Apr 20, 2017 at 9:12
  • @user43999 Try my answer it should work. And mark it as answer to help others.
    – Tariq
    Apr 20, 2017 at 10:51
  • @KeithC I think there is no need of !important as there is no default css for that to override it.
    – Tariq
    Apr 20, 2017 at 10:53

3 Answers 3

1

Basically the issue in your case is you have a label where you are specifying a class to add background color white but if you inspect the dom using developer tools ui:inputCheckbox is again generating another label and for that your class cannot be set since its generated by aura. To overcome that you have to wrap your ui:input check box in a div like below

<div class="setcolorwhite">
  <ui:inputCheckbox aura:id="x" label="label" click="{!c.voidJS}" class="text-color-white"/>
</div>

and in css please add the below

.THIS .setcolorwhite .uiLabel {
   color: #FFFFFF;
}

We are using CSS specificity to set color to label and to ensure only this label reflects this styling we are adding a class to the parent container(setcolorwhite). Hope this helps!

1
  • @Ratan Paul That's only issue of a root div and css applicable on all lightning component as its comes with class attribute. So there no matter of DOM.
    – Tariq
    Apr 20, 2017 at 10:49
0

try removing the space between .THIS and .background-silver class in your css

5
  • This wrong - I lost my background color.
    – JJanek
    Apr 20, 2017 at 9:05
  • Just so that i understand this correctly, you are trying to set text color to white. i dont see that class added 'text-color-white' to any of your component markups. Are you setting it through javascript?
    – RedDevil
    Apr 20, 2017 at 9:23
  • Yes, but in class .background-silver I added color: whit; line. I changed my cod when I trying do this - if I set or add this class to one of my elements this is not working. I think one of class slds what I used has priority with color.
    – JJanek
    Apr 20, 2017 at 9:33
  • I think its a CSS specificity issue. can you update your question with the entire markup. we may have to increase css specificity to fix this issue
    – RedDevil
    Apr 20, 2017 at 9:57
  • I update with all code
    – JJanek
    Apr 20, 2017 at 10:16
0

Add a extra div to work with .THIS

<aura:component implements="force:appHostable" controller="controller" access="global" >
<aura:attribute name="allLoaded" type="Boolean" default="true"/>
  <aura:renderif isTrue='{!v.allLoaded}'>

   <div>

    <div aura:id="xcont" class="slds-button slds-checkbox--button background-silver text-color-white">
      <label class="answears slds-checkbox--button__label">
      <ui:inputCheckbox aura:id="x" label="label" click="{!c.voidJS}" class="text-color-white" />
    </label>
    </div>

  </div>

  </aura:renderif>
</aura:component>
4
  • Still not working.
    – JJanek
    Apr 20, 2017 at 12:13
  • @user43999 It's working in my case. If it's headache for you then contact me skype: @tarifrudrapur may b i can resolve it.
    – Tariq
    Apr 20, 2017 at 13:06
  • @Tariq i dont agree that its not a DOM thing.any html component you add to the component is par t of the DOM and how you add classes controls hierarchy as well as specificity.
    – RedDevil
    Apr 20, 2017 at 13:12
  • @RedDevil If we talk about this issue there is no issue with DOM. And it's working find in my salesforce account using above code.
    – Tariq
    Apr 20, 2017 at 13:25

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .