You need to sign in to do that
Don't have an account?
Matt 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
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.
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.
All Answers
Use the following format for <ltng:require> tag:
Thanks,
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.
thanks for the help Amit!
Am still not able to load css. Its showing as plain HTML page without any styling.
Can anyone guide me.
Thanks.
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
Everything was correct.
But a small silly mistake when defining path for CSS.
I had used:
instead had to use: singular form of /resource/... :P
Thanks.
Thanks,
Amit
Thanks.
The instructions in the Trailhead are incorrect
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 :)