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

Community Tip - Need to share some code when posting a question or reply? Make sure to use the "Insert code sample" menu option. Learn more! X

Tabset CSS on Tab Selected

pshashipreetham
17-Peridot

Tabset CSS on Tab Selected

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

Shashi Preetham
5 REPLIES 5

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

 

Hi @Sathishkumar_C ,

 

No, they are not working in TWX 9.3.5

 

Thanks,

Shashi Preetham

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

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.

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

Top Tags