1

So, I am working on building my first lightning component! I've had a blast so far, but I am not sure if I'm going about this the right way or not. I am using the scoped example that is on the lightning design system under the tabs section (http://www.lightningdesignsystem.com/components/tabs).

I made quite a lot of modifications to this in my own component. I realized it didn't look very great on the mobile so I took a step back. I copied the code again into a new component and then added (by copy/paste) 6 more tabs in tab header. It seems to be formatting as ugly as my customizations are... Is there something specific you need in your lightning components to make it format correctly across all devices?

For what it matters, I am using the Napoli community template.

enter image description here

----EDIT----

 <aura:component implements="forceCommunity:availableForAllPageTypes">  

<ltng:require styles="/resource/slds080/assets/styles/salesforce-lightning-design-system.css"/>

    <div class="slds-tabs--scoped">   <ul class="slds-tabs--scoped__nav" role="tablist">
        <li class="slds-tabs--scoped__item slds-text-heading--label slds-active" title="Item One" role="presentation"><a class="slds-tabs--scoped__link" href="#" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-scoped-1">Item One</a></li>
        <li class="slds-tabs--scoped__item slds-text-heading--label" title="Item Two" role="presentation"><a class="slds-tabs--scoped__link" href="#" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-scoped-2">Item Two</a></li>
        <li class="slds-tabs--scoped__item slds-text-heading--label" title="Item Three" role="presentation"><a class="slds-tabs--scoped__link" href="#" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-scoped-3">Item Three</a></li>
          <li class="slds-tabs--scoped__item slds-text-heading--label slds-active" title="Item One" role="presentation"><a class="slds-tabs--scoped__link" href="#" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-scoped-1">Item One</a></li>
        <li class="slds-tabs--scoped__item slds-text-heading--label" title="Item Two" role="presentation"><a class="slds-tabs--scoped__link" href="#" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-scoped-2">Item Two</a></li>
        <li class="slds-tabs--scoped__item slds-text-heading--label" title="Item Three" role="presentation"><a class="slds-tabs--scoped__link" href="#" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-scoped-3">Item Three</a></li>
          <li class="slds-tabs--scoped__item slds-text-heading--label slds-active" title="Item One" role="presentation"><a class="slds-tabs--scoped__link" href="#" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-scoped-1">Item One</a></li>
        <li class="slds-tabs--scoped__item slds-text-heading--label" title="Item Two" role="presentation"><a class="slds-tabs--scoped__link" href="#" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-scoped-2">Item Two</a></li>
        <li class="slds-tabs--scoped__item slds-text-heading--label" title="Item Three" role="presentation"><a class="slds-tabs--scoped__link" href="#" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-scoped-3">Item Three</a></li> </ul>   <div id="tab-scoped-1" class="slds-tabs--scoped__content slds-show" role="tabpanel">
        <h2>Item One Content</h2>   </div>   <div id="tab-scoped-2" class="slds-tabs--scoped__content slds-hide" role="tabpanel">
        <h2>Item Two Content</h2>   </div>   <div id="tab-scoped-3" class="slds-tabs--scoped__content slds-hide" role="tabpanel">
        <h2>Item Three Content</h2>   </div> </div> 
</aura:component>

enter image description here

EDIT: Turns out this scoped is meant just for the desktop and not everything on the Lightning Design System is actually responsive. You can tell what is based on the icon... if its just Large then it only works on desktops

Improve this question
9
  • 1
    did you include the SLDS css in your app/component i.e. <ltng:require styles="/resource/SLDS090/assets/styles/salesforce-lightning-design-system.min.css"/>
    – Eric
    Dec 12, 2015 at 2:20
  • Yes, let me update with my code. I had SLDS080 though. Could that be the issue?
    – David Litton
    Dec 12, 2015 at 2:45
  • 1
    Depends on what you named the static resource
    – Eric
    Dec 12, 2015 at 2:46
  • 1
    You resource is SLDS080. It is case sensitive
    – Eric
    Dec 12, 2015 at 3:32
  • 1
    try to open INSTANCENAME/resource/SLDS080/assets/styles/salesforce-lightning-design-system.css and check whether you have that css in your static resource or not.
    – Himanshu
    Dec 12, 2015 at 7:37

1 Answer 1

Reset to default
1

I had a similar problem (except no SLDS styling appeared at all for me). I fixed it by ensuring that the tab divs were wrapped inside <div class="slds">.

Not sure if that will work for you, but worth a shot. There is hardly any information out there on this!

Dave

Improve this answer

You must log in to answer this question.

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