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

Widget Specific CSS - Tabs

Sathishkumar_C
17-Peridot

Widget Specific CSS - Tabs

In some way, I want to hide the tab header using CSS. When using CSS, it works properly.

In my single mashup, I have two tab widgets, and the CSS is applied for two tab widgets.

 

I want apply below CSS with widget specific.

 

.widget-ptcstabset::part(tabs-header){
    display: none;
}

 

How to apply CSS without affecting more than one tab widget? 

 

Note: Thingworx 9.1

ACCEPTED SOLUTION

Accepted Solutions

@Sathishkumar_C,

 

you need to know the ID of the tabset you want the CSS to affect. In my test case I had a tabset with an ID of "ptcstabset-9" and ptcstabset-16"

Using your CSS from above I created:

 

#root_ptcstabset-9.widget-ptcstabset::part(tabs-header){
   display: none;
}

 

The "#" character followed by the ID of the element identifies the specific element. I have placed my sample below.

 

#root_ptcstabset-9.widget-ptcstabset::part(tabs-header){
   display: none;
}

 

 

Hope that helps.

 

Peter

View solution in original post

2 REPLIES 2

@Sathishkumar_C,

 

you need to know the ID of the tabset you want the CSS to affect. In my test case I had a tabset with an ID of "ptcstabset-9" and ptcstabset-16"

Using your CSS from above I created:

 

#root_ptcstabset-9.widget-ptcstabset::part(tabs-header){
   display: none;
}

 

The "#" character followed by the ID of the element identifies the specific element. I have placed my sample below.

 

#root_ptcstabset-9.widget-ptcstabset::part(tabs-header){
   display: none;
}

 

 

Hope that helps.

 

Peter

Thanks @PEHOWE Its working great.

Announcements


Top Tags