Skip to main content
M
MB_946078710-Marble
10-Marble
November 15, 2021
Solved

Thingworx 9.0 Tabset Widget Custom CSS

  • November 15, 2021
  • 1 reply
  • 2870 views

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.

Best answer by MB_9460787

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.

 

1 reply

V
24-Ruby III
VladimirN24-Ruby III
24-Ruby III
November 16, 2021

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

M
MB_946078710-MarbleAuthor
10-Marble
November 18, 2021

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.

P
PEHOWE17-Peridot
17-Peridot
November 22, 2021

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;
}
 

 

    Terms & ConditionsCookie settingsAccessibility statement