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

Community Tip - Your Friends List is a way to easily have access to the community members that you interact with the most! 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,
Email: psp316r@outlook.com,
Mobile: +91 8099838001.
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,
Email: psp316r@outlook.com,
Mobile: +91 8099838001.

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.

Tony

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

Announcements


Top Tags