Hi,
I’m using a lot of tabPanels within an NGClient solution.
I’m trying to apply different styles to make them to look like different.
By acting on the main class “.nav-tabs” all works fine but, in this way, I will change all the tabPanels so I tried to create a new class
named “.nav-tabs.small” in which, for example, I put a smaller font size.
Seems that this approach doesn’t work, you can reproduce the issue by using this sample solution:
[attachment=1]test_tabpanel_css.servoy[/attachment]
You’ll see that the first tabPanel (the one driven by the class “.nav-tabs”) reflects properly the css properties but the second tabPanel (the one driven by the class “.nav-tabs.small”) seems to ignore the class I assigned to it.
[attachment=0]what happen.PNG[/attachment]
By inspecting it with Chrome, I see that the class “.small” seems not applied.
I looked at your example and couldn’t see the “small” class assigned to anything, so not sure what you have tried.
When you would have attached a style class “small” to the tab panel, .nav-tabs.small wouldn’t hit it, because the style class you assign is set to the tab panel, not the tab. That means in the browser it ends up on a div above the actual tab you are trying to target. But since you are saying .nav-tabs.small, the rule will only be applied to an element that has the class “nav-tabs” and “small”. Your class ends up on the div classed “svy-tabpanel” above that, so that will not work. Even worse, the text you want to style is below the nav-tabs element. The structure looks roughly like this (you can see that in inspector)
