Tabset CSS on Tab Selected

[pshashipreetham]

Hello,

I am using a ptcs-tabset, I want to put the grey borders for the selected tab, and hide the bottom border...

I used the following CSS:

.widget-ptcstabset::part(tabs-tab)[selected]::part(tab){
   border-width:5px solid black !important;
   border-left-color: grey !important;
   border-right-color: grey !important;
   border-top-color: grey !important;
   border-bottom-color: grey !important;
}

.widget-ptcstabset::part(tabs-tab)[selected]{
   border-width:5px solid black !important;
   border-left-color: grey !important;
   border-right-color: grey !important;
   border-top-color: grey !important;
   border-bottom-color: grey !important;
}

None of them is working 

Thingworx version: 9.3.5

Thanks

[Sathishkumar_C]

tried the following in Thingworx 9.1.11 and it's working fine.

For all sides of border,

.widget-ptcstabset::part(tabs-tab)[selected]:not([disabled]){
    border:2px solid;
    border-color: grey
}

For specific border,

.widget-ptcstabset::part(tabs-tab)[selected]:not([disabled]){
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-left: 1px solid;
    border-right: 1px solid;

    border-top-color: red;
    border-bottom-color: red;
    border-left-color: red;
    border-right-color: red;
}

[pshashipreetham]

Hi @Sathishkumar_C ,

No, they are not working in TWX 9.3.5

Thanks,

[Sathishkumar_C]

Okay, fine. Unfortunately , I don't have 9.3.5 instance for the testing.

[TonyZhang]

Hi @pshashipreetham,

In Custom CSS tab, disable linting and try below:

@supports (ptcs-style-unit: "PTCS-TAB-SET") {
   [part=tabs-tab][selected] {
 border: 5px solid grey !important;
       border-bottom: 0 !important;
   }    
}

This syntax is introduced since ThingWorx 9.3.4.

See below documents for more information on styling web component based widgets in TWX 9.3.4 and newer versions.

• https://www.ptc.com/en/support/article/cs377455
• https://support.ptc.com/help/thingworx/platform/r9/en/index.html#page/ThingWorx/Help/Mashup_Builder/Mashups/CustomCSSBreakingChangesToCustomCSSInThingWorx930.html#
• http://support.ptc.com/help/thingworx/platform/r9/en/index.html#page/ThingWorx/Help/Mashup_Builder/Theming/ApplyingCustomCSSToWebComponents.html

[jensc]

Hello,

What about something like this?

.widget-ptcstabset::part(tabs-tab)[selected] {
   border-left-color: grey !important;
   border-right-color: grey !important;
   border-top-color: grey !important;
   border-bottom-width: 0px !important;
}

I am not great with CSS and haven't tested this, but please give it a shot.

Regards,

Jens