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;
    }
  • Adding !important to the .background-silver styles doesn't help? – Keith C Apr 20 '17 at 8:35
  • Unfortunately no. Maybe one of class what I use disturb with this. – JJanek Apr 20 '17 at 9:12
  • @user43999 Try my answer it should work. And mark it as answer to help others. – Tariq Apr 20 '17 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 '17 at 10:53
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!

| improve this answer | |
  • @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 '17 at 10:49
0

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

| improve this answer | |
  • This wrong - I lost my background color. – JJanek Apr 20 '17 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 '17 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 '17 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 '17 at 9:57
  • I update with all code – JJanek Apr 20 '17 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>
| improve this answer | |
  • Still not working. – JJanek Apr 20 '17 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 '17 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 '17 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 '17 at 13:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.