0

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

  • 1
    do u need tab label or content to be center? – salesforce-sas Aug 13 '19 at 10:19
  • @salesforce-sas tab label to be centered. – Manohar Aug 13 '19 at 10:59
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: enter image description here

| improve this answer | |
0

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

enter image description here

| 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.