Different style(color etc) for Tabs in TabPanel Webcomponent

Forum to discuss the new web client version of Servoy.

Different style(color etc) for Tabs in TabPanel Webcomponent

Postby dev-ws-011 » Thu Mar 25, 2021 11:00 am

Hi All,

We need to provide each tab a different style (color, etc) dynamically on some dataprovider, for instance tab color based on number of records in each form in respective tab.

We have checked for properties of tabpanel but cannot find any styleclass property used to style individual tab.

Any help will be highly appreciated.

Regards
Servoy Developer
dev-ws-011
 
Posts: 66
Joined: Fri Oct 21, 2016 8:23 am

Re: Different style(color etc) for Tabs in TabPanel Webcompo

Postby paronne » Thu Mar 25, 2021 1:51 pm

Hi, are you using the Bootstrap Tabpanel component or the ServoyDefault Tabpanel ?
If you make use of the Bootstrap Tabpanel component there is an iconStyleClass property you can use to show a colored icon in the tab.
for example: iconStyleClass="fas fa-circle text-warning".
It doesn't color the whole tab however can be used to give some feedback to the user.

Another possibility is to use HTML with a style class for the tab's text property.
e.g. text="<span class='text-warning'>myFirstTab</span>".

Regards,
Paolo
paronne
 
Posts: 174
Joined: Fri Nov 02, 2012 3:21 pm

Re: Different style(color etc) for Tabs in TabPanel Webcompo

Postby dev-ws-011 » Thu Mar 25, 2021 4:34 pm

Hi Paolo,

Thanks for quick response.

Yes, we are using Bootstrap TabPanel component. We have used iconStyleClass but in this situation we need to give a color to tab and it's text.

Also, we have tested the span method it worked as you mentioned but observed that we were not able to provide style="color:blue" as we do in html span tag.

We believe that if 'styleclassProvider' property is introduced in tabpanel bootstrap component for text color /tab color, it will be a good enhancement and color can be dynamically updated.

Regards
Servoy Developer
dev-ws-011
 
Posts: 66
Joined: Fri Oct 21, 2016 8:23 am

Re: Different style(color etc) for Tabs in TabPanel Webcompo

Postby paronne » Fri Mar 26, 2021 10:07 am

Hi,

style="color:blue" is stripped out because data is sanitized.
If you trust the data you can disable data sanitizing using elements.tabpanelname.putClientProperty(APP_UI_PROPERTY.TRUST_DATA_AS_HTML, true).
Be aware you should make sure data is trusted to avoid XSS attacks.

You can enter your feature requests at support.servoy.com; they would be evaluated by our engineers and considered if fitting the roadmap of future releases.

Regards,
Palo
paronne
 
Posts: 174
Joined: Fri Nov 02, 2012 3:21 pm

Re: Different style(color etc) for Tabs in TabPanel Webcompo

Postby dev-ws-011 » Wed Mar 31, 2021 12:10 pm

Hi,

Thanks for your response.

Created feature request at support.servoy.com.
Here is url https://support.servoy.com/browse/SVY-16024.

Regards
Servoy Developer
dev-ws-011
 
Posts: 66
Joined: Fri Oct 21, 2016 8:23 am


Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 3 guests