function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
OrdosOrdos 

Lightning supresses custom styles in VisualForce page

Hi all,

I ran into an issue where a VisualForce page containing custom style classes (in the head tag), and which displays fine in Classic, gets the custom classes supressed in Lightning. If raw styles are used (without classes), then those work.

Did anyone experience this and if yes then how can custom classes be used within VisualForce under Lighting?

Thanks ahead for your freedback on this.
Best Answer chosen by Ordos
Shruti SShruti S

Please do not use any tag selector, instead use scoped classes and define your own style classes and use them. The reason for doing so is, the styles for the tag selectors will already be defined in LDS because of which you custom classes are getting overridden with the styles defined in LDS.

You can replace you CSS code with the below code.

.myapp .down_grouping_header_cell {
    background-color: #AACE91;
    padding: 5px 5px 5px 5px;
    pointer: cursor;
    white-space: nowrap;
}

All Answers

Shruti SShruti S
Can you try making your classes more selective by scoping it with a custom prefix?

Example :  
.modal-header {}
becomes 
.myapp .modal-header {}

 
OrdosOrdos
Didn't work, but I may be misunderstanding what you are suggesting, but I tried this:
  
td .myapp .down_grouping_header_cell
        {
            background-color: #AACE91;
            padding: 5px 5px 5px 5px;
            pointer: cursor;
            white-space: nowrap;
        }

Original class did not have ".myapp" in the class definition. I then try to apply it to table cell (via JavaScript) like this:
  
var table = document.createElement('table');
var row = table.insertRow();
var cell = row.insertCell(row.cells.length);
cell.className = 'myapp down_grouping_header_cell';

​
OrdosOrdos
Also tried
  
<style scoped="scoped">
...
</style>

 
OrdosOrdos
For some reason, when displayed in Lightning, custom classes which starts with "td" were supressed. I removed the cell scoping, and just left the custom part ".custom-class-name" instead of "td .custom-class-name", it started working.
Shruti SShruti S

Please do not use any tag selector, instead use scoped classes and define your own style classes and use them. The reason for doing so is, the styles for the tag selectors will already be defined in LDS because of which you custom classes are getting overridden with the styles defined in LDS.

You can replace you CSS code with the below code.

.myapp .down_grouping_header_cell {
    background-color: #AACE91;
    padding: 5px 5px 5px 5px;
    pointer: cursor;
    white-space: nowrap;
}
This was selected as the best answer
OrdosOrdos
Thanks Shruti, that makes total sense.