Community Tip - Stay updated on what is happening on the PTC Community by subscribing to PTC Community Announcements. X
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.
Solved! Go to Solution.
Hello,
I was finally able to make it happen.
I just slighly modified selector provided by Pehowe to:
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.
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: