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
Bhanu Tanaka 5Bhanu Tanaka 5 

How to reduce the width of a lightning-tabset (vertical)

Hello - I'm trying to figure out how to reduce the width of a lightning-tabset set to the vertical variant.  Our tab labels are very short (3 chars) and I'd like to save on the screen real estate.  Current code as follows:
  
<lightning-tabset variant="vertical">
    <template for:each={practiceList} for:item="practice">
        <lightning-tab label={practice.systemOfRecord} key={practice.id}>
            <c-covetrus-practice
                practice={practice}
                oncovetrusshowactivitydetail={showActivityDetail}
            ></c-covetrus-practice>
        </lightning-tab>
    </template>
</lightning-tabset>

Thank you!
Raj VakatiRaj Vakati
You can specify the custom style class with the width and use!importance in css  .. try and let me know if not working .. 


https://www.lightningdesignsystem.com/components/tabs/

 
Naveen KNNaveen KN
hi Bhanu, 

I see a standard class and style have given for the tabs in the vertical variant. As Raj said, the only way is to override the style for your case. 

Codengine.in

Naveen