lightning-tab align align center

Question

I have only two tabs in lightning-tabset. And its align left. I need to have it in center. I tried padding-left: 200px; on ".slds-tabs" but nothing seems to be working. It works when i change through inspect element. But Nothings happening when i add code in componet's .css file.

here is playground's link : https://developer.salesforce.com/docs/component-library/tools/playground/BZGvQu4nV/8/edit

Is there any cleaner approach without using padding? I know its very basic and silly question. Any help would be appreciated.

Thanks, Manohar

Answer 1

Personally, I try to avoid lwc components as soon as custom css is involved because of restrictions imposed by shadow dom

This gist leverages the slds tabs blueprint

I simply declared the .tab-container as flex, aligned the items to center, and each li item is also self centered.

example.html

<div class="slds-tabs_default">
    <ul class="slds-tabs_default__nav tab-container" role="tablist">
        <li class="slds-tabs_default__item slds-is-active" title="Item One" role="presentation" onclick={tabClick}>
        <a class="slds-tabs_default__link" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-default-1" id="tab-default-1__item">Item One</a>
        </li>
        <li class="slds-tabs_default__item" title="Item Two" role="presentation" onclick={tabClick}>
        <a class="slds-tabs_default__link" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="false" aria-controls="tab-default-2" id="tab-default-2__item">Item Two</a>
        </li>
    </ul>
    <div id="tab-default-1" class="slds-tabs_default__content slds-show" role="tabpanel" aria-labelledby="tab-default-1__item">Item One Content</div>
    <div id="tab-default-2" class="slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-2__item">Item Two Content</div>
</div>

(sample method to toggle css classes for activating tabs - you can easily achieve the same for the content tabs)

example.js

    tabClick(e){
      const allTabs = document.querySelectorAll('ul>li');
      allTabs.forEach( (elm, idx) =>{
          console.log(elm);
          elm.classList.remove("slds-is-active")
      })
    e.currentTarget.classList.add('slds-is-active')
}

example.css

.tab-container {
    display:flex;
    align-items: center;
    justify-content: center;

}
.tab-container li{
  align-self: center;
}

Preview:

Answer 2

I just came across a similar scenario and I followed the post but I couldn't switch the body of tab set just the header kept on changing. So I have modified the solution and used the slds-grid to align the headers.

HTML

 <template>
<div class="slds-tabs_default">
    <ul class="slds-grid slds-gutters slds-tabs_default__nav tab-container" role="tablist">
        <li class="slds-col slds-tabs_default__item slds-is-active" title="Item One" role="presentation" onclick={tabClick}>
            <a class="slds-align_absolute-center slds-tabs_default__link" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-default-1" id="tab-default-1__item">Item One</a>
        </li>
        <li class="slds-col slds-tabs_default__item" title="Item Two" role="presentation" onclick={tabClick}>
            <a class="slds-align_absolute-center slds-tabs_default__link" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="false" aria-controls="tab-default-2" id="tab-default-2__item">Item Two</a>
        </li>
        <li class="slds-col slds-tabs_default__item" title="Item Two" role="presentation" onclick={tabClick}>
            <a class="slds-align_absolute-center slds-tabs_default__link" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="false" aria-controls="tab-default-3" id="tab-default-3__item">Item Three</a>
        </li>
        <li class="slds-col slds-tabs_default__item" title="Item Two" role="presentation" onclick={tabClick}>
            <a class="slds-align_absolute-center slds-tabs_default__link" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="false" aria-controls="tab-default-4" id="tab-default-4__item">Item Four</a>
        </li>
    </ul>
    <div id="tab-default-1" class="tab-default-1 slds-tabs_default__content slds-show" role="tabpanel" aria-labelledby="tab-default-1__item">Item One Content</div>
    <div id="tab-default-2" class="tab-default-2 slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-2__item">Item Two Content</div>
    <div id="tab-default-3" class="tab-default-3 slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-3__item">Item Three Content</div>
    <div id="tab-default-4" class="tab-default-4 slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-4__item">Item Four Content</div>
</div>
</template>

JS

import { LightningElement } from 'lwc';

export default class TabsetBasic extends LightningElement {
 tabClick(e) {
    const allTabs = this.template.querySelectorAll('.slds-tabs_default__item');
    allTabs.forEach((elm, idx) => {
        elm.classList.remove("slds-is-active");
    });
    e.currentTarget.classList.add('slds-is-active');
    var element = e.currentTarget.firstChild.id;

    var selectedelementarea = element.substr(0, element.indexOf('_'));;

    const tabview = this.template.querySelectorAll('.slds-tabs_default__content');
    tabview.forEach((elm, idx) => {
        elm.classList.remove("slds-show");
        elm.classList.add("slds-hide");
    });
    this.template.querySelector(`.${selectedelementarea}`).classList.remove("slds-hide");
    this.template.querySelector(`.${selectedelementarea}`).classList.add("slds-show");

 }
}

RESULT