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

  • 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 '15 at 2:20
  • Yes, let me update with my code. I had SLDS080 though. Could that be the issue? – David Litton Dec 12 '15 at 2:45
  • 1
    Depends on what you named the static resource – Eric Dec 12 '15 at 2:46
  • 1
    You resource is SLDS080. It is case sensitive – Eric Dec 12 '15 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 '15 at 7:37
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 | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.