My expected result should be, all tabs display in one line with out "more" option by using dynamic code.

When i tried dynamic code, Tabset displays only 3 names and rest of them in more option as show below even though it has enough space to display all values. enter image description here

Below is the code. ===DYNAMIC CODE====

<lightning:tabset>
   <!-- Dynamic, but displays on 3 tabs and more option for other tabs -->
         <aura:iteration items="{!v.systemNames}" var="sys">
               <lightning:tab label="{!sys}" id="{!sys}"/>
          </aura:iteration>    
</lighitng:tabset>

When i hard code the same list in component itself, all of them are displaying as expected. enter image description here

=======HARDCODED=======

<lightning:tabset>
     <!-- Hard coded the names to display all of them in one set -->
      <lightning:tab label="AMBPL" id="AMBPL"/>
       <lightning:tab label="AUGPL" id="AUGPL"/>
       <lightning:tab label="CLVNR" id="CLVNR"/>
       <lightning:tab label="DELTA" id="DELTA">
                 ....
                 ....
</lightning:tabset>

Perhaps it behaves better if all possible tabs are available at init time. Try wrapping the whole thing inside an aura:if that doesn't render until the list is fully available.

  • I tried it too. But no luck. isLoaded is made to be true only after full list is available. <aura:if isTrue="{!v.isLoaded}"> Iteration Logic </aura:if> – Alex Dec 6 at 14:07

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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