1

I am trying to convert from using SLDS as a static resource and use the <apex:slds/> element in a visualforce page instead. I am on a sandbox that is on Spring '17 and the page is version 39.0. When I load it I can see the min'ed resource coming across the network tab in my browser dev console. I can also do the following to get the non-minified resource:

<apex:stylesheet value="{!URLFOR($Asset.SLDS, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />

The only differences in one particular class style that I notice is demonstrated below:

CSS From Static Resource (expected display results):

.slds .slds-text-heading--large {
    font-weight: 300;
    font-size: 32px;
    line-height: 1.25; }

CSS From SLDS Asset import (not expected display results):

.slds-scope .slds-text-heading--large {
    font-weight: 300;
    font-size: 1.75rem;
    line-height: 1.25; }

I just chose one particular style to demonstrate my issue. But none of the styling is happening on the page. I feel like I am missing something simple, but I am having issues pinpointing it.

Display with Static Resource:

enter image description here

Display with <apex:slds />:

enter image description here

2
  • 1
    Did you apply the slds-scope class to your container element? It might help to include the markup for this header.
    – Adrian Larson
    Feb 7, 2017 at 14:40
  • of course I didn't, but that opened up a whole new issue. Thanks @AdrianLarson. Feb 7, 2017 at 14:45

1 Answer 1

3

Make sure you apply the scoping class!

<apex:slds />
<div class="slds-scope">
    <!-- header markup -->
</div>

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