cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Did you know you can set a signature that will be added to all your posts? Set it here! X

Thingworx 9.0 Tabset Widget Custom CSS

MB_9460787
10-Marble

Thingworx 9.0 Tabset Widget Custom CSS

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.

ACCEPTED SOLUTION

Accepted Solutions

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.

 

View solution in original post

5 REPLIES 5

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

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
17-Peridot
(To:MB_9460787)

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

 

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

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.

 

Announcements


Top Tags