Thingworx 9.0 Tabset Widget Custom CSS

[MB_9460787]

Hello,

I am working with ptsctabset witdget on TWX 9.0. I would like to have tabs on the bottom spreaded to whole widget width. For that I need use custom CSS to disable not needed parts - back-button, forward-button and ptcs-dropdown part.

Unfortunatelly, I am struggling to use correct selectors. Could anyone please help me with it?

Thank you.

[VladimirN]

Article - "ThingwWorx Web Components customization with Visual SDK CSS": https://www.ptc.com/en/support/article/CS324593 

[MB_9460787]

Hello VladimirN,

thanks for that article. It helped a lot. However, for that particular part of ptsctabset widget, I am still unable to "reach" it via any CSS selector. Could you please try to suggest how can I set styles for that particular parts - back-button, forward-button and ptcs-dropdown?

Thank you very much in advance.

[PEHOWE]

Hello @MB_9460787,

I do not know the entire answer to your question. The following will reduce the size of the back and forward buttons.

.widget-ptcstabset:host::part(tabs-header)::part(back-button) {
    padding: 0;
}
.widget-ptcstabset:host::part(tabs-header)::part(forward-button) {
    padding: 0;
}
 

[MB_9460787]

Hello Pehowe,

thanks for reply. It actually does make it smaller. What I don't understant is why I cannot completely turn it off with "display: none;"

When I righclick the element -> open DevTools and put the same "display: none;" into element.style{}, then it works and back button area is not visible at all and first tab start right at position [0,0]

Thank you

[MB_9460787 · Accepted solution]

Hello,

I was finally able to make it happen.

I just slighly modified selector provided by Pehowe to:

.widget-ptcstabset::part(tabs-header)::part(back-button) {

    display: none;

}

Thank you for your help.