2

I am new to Salesforce development, am trying to include slds classes in my component

That's my application and component am trying to include the padding classes in my component slds-p-top_xx-small, slds-p-top_xx-large, but they are not working.

Could you please help

 <aura:application extends="force:slds">
    <c:Space_Component />
 </aura:application>


 <aura:component>
<div class="heroSpaceClass slds-grid slds-wrap">
    <center>
        <div class="slds-p-top_xx-large supFocussed">Support tailored to you</div>
        <div class="slds-p-top_xx-small personalizeExp">Sign in to maximize your support experience and save time</div>
        <div><button class="slds-p-top_xx-large slds-button slds-button--brand signInBtn">Sign in</button></div>
    </center>
   </div>
  </aura:component>
Improve this question
0

1 Answer 1

Reset to default
12

The new SLDS styles that use "_" will be available in Summer 17. Until then, you need to replace "_" with "--" in order for them to work (e.g. "slds-p-top--xx-large"). Also, do not use CENTER, but instead use slds-align--absolute-center or slds-text-align--center to align your text to the middle. Also, when using grid, make sure you specify a size (e.g. slds-size--12-of-12 for full width).

Here's the updated code:

<aura:component>
    <div class="heroSpaceClass slds-grid slds-wrap slds-text-align--center">
        <div class="slds-p-top--xx-large slds-size--12-of-12 supFocussed">Support tailored to you</div>
        <div class="slds-p-top--xx-small slds-size--12-of-12 personalizeExp">Sign in to maximize your support experience and save time</div>
        <div class="slds-size--12-of-12 slds-p-top--xx-large"><button class="slds-button slds-button--brand signInBtn">Sign in</button></div>
    </div>
</aura:component>
Improve this answer
4
  • they really should wait to update the lightning design website until all orgs are at summer 17. In the meantime, you can see previous versions here: lightningdesignsystem.com/downloads/#archives
    – willard
    May 31, 2017 at 2:58
  • 4
    @willard I've let the documentation team know, on more than one occasion, my displeasure about muddying the documentation with Summer 17 stuff prematurely, at least not without a BIG HUGE WARNING that the stuff is in preview. We shouldn't have to guess if we're looking at stuff for this release or next.
    – sfdcfox
    May 31, 2017 at 4:14
  • Thanks so much @sfdcfox, good to know, I hope slds-p-top--xx-large will continue to work even after summer 17. It worked perfect as expected. - Keerthi
    – user5495947
    May 31, 2017 at 12:34
  • @user5495947 It will work for 18 months; you must migrate to the new syntax before Winter 19 (released near the end of 2018).
    – sfdcfox
    May 31, 2017 at 13:46

You must log in to answer this question.

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