function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Abhi_TripathiAbhi_Tripathi 

Unable to Change/Add CSS in lightning:tab

Trying to add css class in lightning:tab, but always getting the aura:id value as undefind, I am trying to load my third tab as red in color onload of the component.
here is the component 
<lightning:tabset selectedTabId="tabRec" aura:id="tabset" > 
         <lightning:tab label="Lead1" aura:id="tab1" class="tabPadding"> 
         <lightning:tab label="Lead2" aura:id="tab2" class="tabPadding">
         <lightning:tab label="Lead3" aura:id="tab3" class="tabPadding"> 

</lightning:tabset>


Here is the helper, calling this function in init 
applyCSS: function(cmp, event) { 
        var cmpTarget = cmp.find("tab3"); 
        alert(JSON.stringify(cmpTarget)); 
        $A.util.addClass(cmpTarget, 'changeMe');
 },


This is style
  
.THIS .changeMe { 
      background:red!important; 
}

 
NagendraNagendra (Salesforce Developers) 
Hi Abhi,

By default, tabs are slowly loaded. To verify, try getting the id of tab1 instead of tab3. Tab1 will be loaded by default, so you will get the id. But unless and until you click tab 2 and tab 3, they won’t be loaded, hence component.find will return undefined.

Thanks,
Nagendra
Deepali KulshresthaDeepali Kulshrestha
Hi Abhi,

You can do this by two methods:

1. You can write your js code in renderer of the lightning bundle.

2. You have to use an event in order to make changes in the tab because while loading the javascript is loaded first and then the dom part is loaded in the browser which will certainly solve your issue.

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks and Regards,
Deepali Kulshrestha