Different style(color etc) for Tabs in TabPanel Webcomponent

Questions
1

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

2

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=“myFirstTab”.

Regards,
Paolo

3

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

4

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

5

Hi,

Thanks for your response.

Created feature request at support.servoy.com.
Here is url Jira.

Regards