Skip to main content
18-Opal
January 11, 2023
Question

Tabset CSS on Tab Selected

  • January 11, 2023
  • 2 replies
  • 2546 views

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

2 replies

17-Peridot
January 12, 2023

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

 

18-Opal
January 12, 2023

Hi @Sathishkumar_C ,

 

No, they are not working in TWX 9.3.5

 

Thanks,

17-Peridot
January 12, 2023

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

17-Peridot
January 12, 2023

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