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

Community Tip - When posting, your subject should be specific and summarize your question. Here are some additional tips on asking a great question. X

Tab Widget: How to style the white space between tab headers

nmt
9-Granite
9-Granite

Tab Widget: How to style the white space between tab headers

Hi,

 

Is there a way to style the white space between the tab headers using any custom CSS or so? I tried using the below CSS:

 

.widget-ptcstabset::part(tabs-tab){

     margin-left:0px !important;
     margin-right:0px !important;
}

 

But this completely removes the white space. I want that space between tab headers, but is there any way to style or colour it? 

 

Thank you.

Tab.PNG

1 ACCEPTED SOLUTION

Accepted Solutions
cmorfin
19-Tanzanite
(To:nmt)

Hi @nmt 

 

Just for info there has been an update on the article https://www.ptc.com/en/support/article/CS325847 with a custom css that should allow to configure the colour of the remaining header.

 

Hope this helps

Christophe

 

View solution in original post

11 REPLIES 11
cmorfin
19-Tanzanite
(To:nmt)

Hi @nmt 

 

CSS has not got many configuration for margin, however there are a few more option for border. So an idea would be to remove the margin and add border:

.widget-ptcstabset::part(tabs-tab){

margin-left:0px !important;
margin-right:0px !important;
border-left:24px;
border-right:24px;
border-top:0px;
border-bottom:0px;
border-color:yellow;
border-style:solid;


}

 

Hope this helps

Christophe

 

nmt
9-Granite
9-Granite
(To:cmorfin)

Hi @cmorfin 

 

Thank you for your response!

 

I tried using the below code and it did remove the space between the tab headers, but the white space after 'Tab Name6' (as in the picture) is still the same, is there a way to style it?

cmorfin
19-Tanzanite
(To:nmt)

Hi @nmt 

 

Can you upload your sample mashup here, because I do not have this display on my side.

Also what version of ThingWorx are you using ?

 

Thanks

Christophe

 

nmt
9-Granite
9-Granite
(To:cmorfin)

Hi @cmorfin 

 

I am using ThingWorx 8.5.4. and I have uploaded the sample mashups in .png format.

The CSS I used is:

.widget-ptcstabset::part(tabs-tab){
margin-left:0px !important;
margin-right:0px !important;
padding: 10px 10px 10px 10px;
}

After applying this, the white space next to 'Tab Name6' is still unaltered.

 

Thank you. 

 

nmt
9-Granite
9-Granite
(To:nmt)

Is there any way? Can someone help?

cmorfin
19-Tanzanite
(To:nmt)

Hi @nmt 

 

Sorry for delay I was ooto last week.

Is it possibly that you export your mashup and relevant entities as a xml file and upload it here?

The image files are not enough to understand how the mashup is built.

 

Thanks

Christophe

 

nmt
9-Granite
9-Granite
(To:cmorfin)

Hi @cmorfin,

 

I have attached my mashup and the style as .xml files.

 

Thank you

cmorfin
19-Tanzanite
(To:nmt)

Hi @nmt 

 

Thank you for this, it was helpful.

Unfortunately I can't see a way to change the color of this space behind the last tab either.

I have reported this to R&D, see a summary at https://www.ptc.com/en/support/article/CS325847 

 

Thank you

Christophe

 

nmt
9-Granite
9-Granite
(To:cmorfin)

Hi @cmorfin 

 

I appreciate the efforts you put in and I'll keep a check on that link you provided. 

 

Thank you

cmorfin
19-Tanzanite
(To:nmt)

Hi @nmt 

 

Just for info there has been an update on the article https://www.ptc.com/en/support/article/CS325847 with a custom css that should allow to configure the colour of the remaining header.

 

Hope this helps

Christophe

 

nmt
9-Granite
9-Granite
(To:cmorfin)

Hi @cmorfin 

 

Yes, it's working fine now. 

 

Thank you for the help! 

Nileena

Top Tags