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

Improve this question
2
  • 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 Commented Sep 30, 2017 at 4:06
  • Sounds like the changes Salesforce communicated in this blog: developer.salesforce.com/blogs/developer-relations/2017/08/… Commented Sep 30, 2017 at 4:33

2 Answers 2

Reset to default
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.

Improve this answer
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!

Improve this answer
7
  • Existing structure is scoped one only but still I am facing this issue Commented Sep 30, 2017 at 11:23
  • Can you share the code structure(CSS and HTML) you are using? Commented Sep 30, 2017 at 11:25
  • stage thead { color:white; Background-color: blue; Width:5px; } Commented Sep 30, 2017 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> Commented Sep 30, 2017 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. Commented Sep 30, 2017 at 14:39

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.