0

I have a external CSS stored in static resource. I am referencing style class from that CSS in many places( lightning components and visual force pages). After winter 18 update,few of my styles especially color and background colour of thead tag is getting overriding with styles from app.css.

I am applying same CSS for both vf page and lightning component. But this is happening only in lightning components, vf page styles are not getting overrided. How to prevent this from happening and wat could be the reason

  • DOM tree is different in Lightning vs VF so either your selector is not valid or is not as selective as the one in app.css. Not sure this is a salesforce question, seems more like a pure CSS question without more specific details its hard to say – Eric Sep 30 '17 at 4:06
  • Sounds like the changes Salesforce communicated in this blog: developer.salesforce.com/blogs/developer-relations/2017/08/… – techbusinessman Sep 30 '17 at 4:33
0

I had the similar issue with my custom Lightning component on the Napili template, after the Winter'18 release(around Sep 10th), where I had the background-color attribute on the <thead> tag. Only fix I could make was: Having the CSS attribute in each of the <td> tags(Child elements). This fixed my issue.

As this is not a good practice, I have contacted Salesforce support(as <thead>'s CSS attributes used to function well prior to Winter' 18 release). This is what they mentioned to me:

Modifying the background-color for this particular part of the DOM will be added in a future release. It seems to be affected by some of the CSS attributes that are being overwritten on the parent element. Thus the only workaround at this time: Adding the CSS attributes to the child elements rather than parent.

0

In this scope can help you.

Let suppose you have a rule in your static resource like:

thead th{
   font-weight: bold;
}

<table>
    <thead>
        <th>
            Heading <!-- Your css will apply on this content only if there is no rule for this element in the salesforce css. -->
        </th>
    </thead>
</table>

This can be overridden by salesforce CSS so to prevent this wrap your CSS in a scope and then wrap your elements in a wrapper and wrapper is having the top selector/scope selector you used in your CSS.

Let me clarify with an example:

Old/Current structure in static resource:

thead th{
   font-weight: bold;
}

After adding the scope/wrapper your CSS and HTML becomes this:

.myScope thead th{
   font-weight: bold !important; /* here "!importatnt" is required if added with the salesforce CSS rules else you can leave it. */
}


 <table class="myScope">
    <thead>
        <th>
            Heading <!-- Your css will apply on this content only if there is no rule for this element in the salesforce css. -->
        </th>
    </thead>
</table>

To add scope to your CSS rules you can use online tools like SASS Compiler

Hope this solves your problem!

  • Existing structure is scoped one only but still I am facing this issue – Bhuvnisha Sep 30 '17 at 11:23
  • Can you share the code structure(CSS and HTML) you are using? – itzmukeshy7 Sep 30 '17 at 11:25
  • stage thead { color:white; Background-color: blue; Width:5px; } – Bhuvnisha Sep 30 '17 at 11:44
  • < table class=" slds-table slds-max-medium-table-stacked slds-no-row--hover stage"> <thead> <tr> <th> Filename </th> </tr> </thead> </table> – Bhuvnisha Sep 30 '17 at 11:45
  • 1
    @Bhuvnisha Would be really helpful if you posted your CSS and any other relevant HTML where the issue is happening with your components. Without that, it's mostly supposition. Base handling of Lightning CSS classes on the platform has changed, esp as applies to background colors of components. – crmprogdev Sep 30 '17 at 14:39

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.