Customize multiple tab controls

Question

I have two tab controls each sitting within its own panel of an ejs-layout. I need their selected lines to be yellow. I can’t get them both to convert. The left one will, the right one will not. BUTIf I remove the left one, the right one does render yellow. See attached screen shots.Left Tab html:

Right Tab html:

.scss.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text { color: var(--reqDarkBlue) !important; //you will notice both tab controls have blue text} #tab_default .e-tab-header .e-toolbar-items .e-indicator.custom { background: var(--reqYellow) !important; /*selected tab line*/ } #managerSourceTab .e-tab-header .e-toolbar-items .e-indicator.custom { background: var(--reqYellow) !important; } .ts The onCreated are the same. I’d split them out during troubleshootingonCreated(args: any): void { const myDocument = document.querySelector(".e-indicator"); if (myDocument ===null){ console.log('element is null'); } else { myDocument.classList.add("custom"); }} onTabCreated(args: any): void { const myDocument = document.querySelector(".e-indicator"); if (myDocument ===null){ console.log('element is null'); } else { myDocument.classList.add("custom"); }} Notice when both present, the right one stays red. If I remove the left one, the right one turns yellow. Therefore, the references work.How do I get them both yellow?Thanks.Attachment: SF_Tab_lines_80854989.zip

Satheesh Kumar Balasubramanian · Accepted Answer

Hi Walter,We have checked your shared snippets and let you know that querySelector is wrongly given in tab created event which is the cause for the reported issue. We have modified the sample to customize both tab indicator color.https://stackblitz.com/edit/angular-multiple-tab-indicator-color?file=app.component.tsapp.component.ts:  onCreated(args: any): void {    const myDocument = document.querySelector(      '#tab_default .e-tab-header .e-toolbar-items .e-indicator'    );    if (myDocument === null) {      console.log('element is null');    } else {      myDocument.classList.add('custom');    }  }  onTabCreated(args: any): void {    const myDocument = document.querySelector(      '#managerSourceTab .e-tab-header .e-toolbar-items .e-indicator'    );    if (myDocument === null) {      console.log('element is null');    } else {      myDocument.classList.add('custom');    }  }Kindly try the above sample and let us know if this meets your requirement.Regards,Satheesh Kumar B

Ruksar Moosa Sait · Answer

Hi Walter,Greetings from Syncfusion support.You can set the
tab indicator color by simply overwriting the Tab default CSS class like the
below.  .e-tab-header.e-toolbar-items.e-indicator {      background:  yellow!important;     }Sample:
https://stackblitz.com/edit/angular-y89q9p?file=app.component.html,app.component.ts,app.component.cssKindly try the
above solution and let us know if this meets your requirement.Regards,Ruksar Moosa Sait

Walter Cook · Answer

You solution does work for one and per the screenshots, I can indeed set one tab control's color.
The problem is it won't do two tab controls.
First one is yellow, second is default red.

If I remove the first one, the second will turn yellow.

Walter Cook · Answer

It sure does. I certainly appreciate the assist.

Ravikumar Venkatesan · Answer

Hi Walter,Thanks for the update.We are happy that our solution helped to achieve your requirement.Regards,Ravikumar Venkatesan