+ Start a Discussion
Travis CanalesTravis Canales 

Lightning Component CSS is missing

Hello All,

I am very new to Lightning development and salesforce in general.

I am trying to make a simple component that consists of tabs with a graph in each one. I have directly copied and pasted the example of a simple tabset from (https://developer.salesforce.com/docs/component-library/bundle/lightning:tabset/example

My issue is that the styling looks like it is entirely missing. Below is a picture of the result: 
User-added image

I have noticed that I am getting an error that may or may not be related to this but I have been unable to find anything about it other than to modify our CSP which doesn't sound right to me. paste of the  error below: 

Refused to run the JavaScript URL because it violates the following Content Security Policy directive: "script-src 'self' 'nonce-[removed as im not sure if this is sensitive]' chrome-extension: 'unsafe-inline' 'unsafe-eval' https://sfdc.azureedge.net *.cs19.visual.force.com https://ssl.gstatic.com/accessibility/". Note that 'unsafe-inline' is ignored if either a hash or nonce value is present in the source list.

This error is repeated each time I click on an item in the tabset.

Has anyone had this issue or know what is possibly causing it? Any help would be greatly appreciated.

Thanks,
Travis
Best Answer chosen by Travis Canales
Khan AnasKhan Anas (Salesforce Developers) 
Hi Travis,

Greetings to you!

You need to extend force:slds in application. The Salesforce Lightning Design System provides a look and feel that’s consistent with Lightning Experience. Your application automatically gets Lightning Design System styles and design tokens if it extends force:slds. 

To extend force:slds:
<aura:application extends="force:slds">
    <c:Your_Component_Name />
</aura:application>

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas

All Answers

Khan AnasKhan Anas (Salesforce Developers) 
Hi Travis,

Greetings to you!

You need to extend force:slds in application. The Salesforce Lightning Design System provides a look and feel that’s consistent with Lightning Experience. Your application automatically gets Lightning Design System styles and design tokens if it extends force:slds. 

To extend force:slds:
<aura:application extends="force:slds">
    <c:Your_Component_Name />
</aura:application>

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
This was selected as the best answer
Travis CanalesTravis Canales
Wow, I appreciate the incredibly fast and accurate reponse! I figured it would be something as simple as that but couldn't find the answer.

Thanks!
ghd sports 2ghd sports 2
Khan Anas .... !
It’s an remarkable piece of Answer for all the web people and thank you for your response - Regards  THOP TV (https://thoptv.fun/)
helloz wanderhelloz wander
This is an awesome kit. Now why don't you watch live cricket world cup on ThopTv application here  thoptv (https://revdls.com/apps/thoptv-mod-apk/)app download
Yogesh sharma 120Yogesh sharma 120
If you love music and don’t have a music streaming application, then Spotify Premium apk (https://apktrent.com/spotify-premium-apk/) is a must have application on your device.
adam zampaadam zampa
I faced the same issue and was solved by the solution shared by Khan Anas. Thank a lot!
If you are playing games on mobile, consider downloading mod of Empires and Puzzles (https://www.universalapk.com/empires-and-puzzles-codes-mod/) which is an absolutely awesome game!