function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Matt EckMatt Eck 

Trouble using SLDS static resource

I'm having trouble with one of the trailhead modules, Lightning Components Basics Input Data Using Forms https://developer.salesforce.com/trailhead/lex_dev_lc_basics/lex_dev_lc_basics_forms

In a previous module I set up the SLDS static resource and now in this module I'm asked to acess it and I'm not getting the custom styling that is supposed to be implimented. I copy-pasted the code exactly as it is shown in the module and only changed the name of the static resource.

expensesApp.app
<aura:application>
 
    <!-- Include the SLDS static resource (adjust to match package version) -->
    <ltng:require styles="{!$Resource.SLDS201 +
         '/assets/styles/salesforce-lightning-design-system-ltng.css'}"/>
 
    <!-- Add the "scoping" element to activate SLDS on components
         that we add inside it. -->
    <div class="slds">
       
        <!-- This component is the real "app" -->
        <c:expenses/>
       
    </div>
    <!-- / SLDS SCOPING DIV -->
 
</aura:application>
expenses.cmp
<aura:component>

    <!-- PAGE HEADER -->
    <div class="slds-page-header" role="banner">
      <div class="slds-grid">
        <div class="slds-col">
          <p class="slds-text-heading--label">Expenses</p>
          <h1 class="slds-text-heading--medium">My Expenses</h1>
        </div>
      </div>
    </div>
    <!-- / PAGE HEADER -->

    <!-- NEW EXPENSE FORM -->
    <div class="slds-col slds-col--padded slds-p-top--large">


        <!-- [[ expense form goes here ]] -->


    </div>
    <!-- / NEW EXPENSE FORM -->

</aura:component>

I've tried uninstalling and re-uploading the resource as well as changing the filepath but I can't seem to figure out how to acces this file.
Any help would be really appreciated.
 
Best Answer chosen by Matt Eck
Amit VaidyaAmit Vaidya
Also include your mark-up inside div tag by providing attribute style="slds". Please find below:
 
<aura:component>

    <!-- PAGE HEADER -->
	<div style="slds">
    <div class="slds-page-header" role="banner">
      <div class="slds-grid">
        <div class="slds-col">
          <p class="slds-text-heading--label">Expenses</p>
          <h1 class="slds-text-heading--medium">My Expenses</h1>
        </div>
      </div>
    </div>
    <!-- / PAGE HEADER -->

    <!-- NEW EXPENSE FORM -->
    <div class="slds-col slds-col--padded slds-p-top--large">


        <!-- [[ expense form goes here ]] -->


    </div>
	</div>
    <!-- / NEW EXPENSE FORM -->

</aura:component>

 

All Answers

Amit VaidyaAmit Vaidya
Hi Matt,

Use the following format for <ltng:require> tag:
 
<ltng:require styles="/resource/SLDS201/assets/styles/salesforce-lightning-design-system-vf.css" />

Thanks,
Amit
Amit VaidyaAmit Vaidya
Also include your mark-up inside div tag by providing attribute style="slds". Please find below:
 
<aura:component>

    <!-- PAGE HEADER -->
	<div style="slds">
    <div class="slds-page-header" role="banner">
      <div class="slds-grid">
        <div class="slds-col">
          <p class="slds-text-heading--label">Expenses</p>
          <h1 class="slds-text-heading--medium">My Expenses</h1>
        </div>
      </div>
    </div>
    <!-- / PAGE HEADER -->

    <!-- NEW EXPENSE FORM -->
    <div class="slds-col slds-col--padded slds-p-top--large">


        <!-- [[ expense form goes here ]] -->


    </div>
	</div>
    <!-- / NEW EXPENSE FORM -->

</aura:component>

 
This was selected as the best answer
Matt EckMatt Eck
Thanks for the response Amit,
I tried changing the format for the <ltng:require> tag as well as including my mark-up inside the div tags and I'm still not seeing any of the stylings.
Matt EckMatt Eck
I just found the problem, I did have to include the mark-up inside of the <div style="slds"> but the path was 
<ltng:require styles="/resource/SLDS201/assets/styles/salesforce-lightning-design-system.css" />

thanks for the help Amit!
Yashita Goyal 17Yashita Goyal 17
Hi,

Am still not able to load css. Its showing as plain HTML page without any styling.
Can anyone guide me.

Thanks.
Amit VaidyaAmit Vaidya
Hi Yashita,

Please check your CSS provided in the ltng:style tag and which you added in the static resource. still if won't load, please post your code here.

Thanks,
Amit
Yashita Goyal 17Yashita Goyal 17
Thanks Amit.

Everything was correct.

But a small silly mistake when defining path for CSS. 

I had used:
<ltng:require styles="/resources/SLDS282/assets/styles/salesforce-lightning-design-system.css"/>

instead had to use:
<ltng:require styles="/resource/SLDS282/assets/styles/salesforce-lightning-design-system.css"/>
singular form of /resource/... :P

Thanks.
 
Amit VaidyaAmit Vaidya
Ooopss... Thanks for letting know about this. Small mistakes can be time consuming.

Thanks,
Amit
Yashita Goyal 17Yashita Goyal 17
Very true!!!

Thanks.
David GriffinDavid Griffin
There's a bug in the trail head -- '/assets/styles/salesforce-lightning-design-system-ltng.css' should be '/assets/styles/salesforce-lightning-design-system.css' instead. Note the dropped '-ltng' -- it doesn't work as currently written in the trailhead.
Olivia Porter 1Olivia Porter 1
Has anyone experienced another bug with this? I am in my developer enviornment and have coppied over exactly all of the above advice and I am still getting the same issue as @MattEck. I have tried ever which way to code this and no avail. I think there is a bug..... 
KagoolKagool
As David Griffin points out the issue with the Trailhead is that the code refers to a scoped version of the SLDS (the “-ltng” suffice on the style sheet) which is not what was uploaded previously.

The instructions in the Trailhead are incorrect
Jorge PopJorge Pop
Just add in aura:application this: extends="force:slds" and relaxx:))))
KCBKCB
" extends" worked thanks @jorge Pop
 
Priyankar PakhiraPPPriyankar PakhiraPP
There are two options to implement CSS in lightning

Option1: You can download the SLDS package (Zip) from  https://www.lightningdesignsystem.com/downloads and include it in static resource and make it public. Next just put the below code snippet in the component where SLDS221 is the static resource name
<ltng:require
                  styles="/resource/SLDS221/assets/styles/salesforce-lightning-design-system.css"/>

But if salesofrce will update the SLDS packege (say from 2.2.1 to 2.3.1) then you will not get the updated one as you have already stored the previous package in the static resource. So if Salesforce introduce a new feture (which is obvious) in latest SLDS verion you have to upload the new package.

Option2:  In this option you just add extends="force:slds" in the aura appliaction like below
<aura:application extends="force:SLDS">

if you implement this then you always get the updated package one. You need not worry about versioning. Salesforfce is also recomend this approach (https://releasenotes.docs.salesforce.com/en-us/winter17/release-notes/rn_lightning_slds.htm)

Happy Lightning learning :)