customize tabPanels skin

[lmk]

Hi all;

I'd like to customize style for tabPanels, I defined css classes for active inactive and disable tab :

<rich:panel style="border:none;height:600px">
<rich:tabPanel switchType="client" styleClass="menuTb" inactiveTabClass="myrich-tab-inactive" activeTabClass="myrich-tab-active" disabledTabClass="menuTb-tab-disable">
<rich:tab label="First" >
 Here is tab #1
 </rich:tab>
<rich:tab label="Second">
 Here is tab #2
 </rich:tab>
<rich:tab label="Third" disabled="true">
 Here is tab #3
 </rich:tab>
</rich:tabPanel>

it works fine, but, I can't customize style for the header border background image,

I overided the classe below to turn arround the problem

.rich-tabhdr-side-border {
background-image: none !important;
}

but, it will be applied for all tabPanels, how can I update this class for each tabPanel ?

Kind regards.

[ilya_shaikovsky]

how about headerClass attribute?

[lmk]

it does not change;

[ilya_shaikovsky]

can't confirm. add the code which not works fine.

[lmk]

<rich:panel style="border:none;height:600px">

 <rich:tabPanel switchType="client" styleClass="menuTb" inactiveTabClass="myrich-tab-inactive" activeTabClass="myrich-tab-active" disabledTabClass="menuTb-tab-disable" headerClass="header-empty">
 <rich:tab label="First" >
 Here is tab #1
 </rich:tab>
 <rich:tab label="Second">
 Here is tab #2
 </rich:tab>
 <rich:tab label="Third" disabled="true">
 Here is tab #3
 </rich:tab>
 </rich:tabPanel>

css class :

.header-empty{
background-image: none !important;
border:none !important;
}

[lmk]

Hi;
no remark or suggestion?

[ilya_shaikovsky]

yup! sorry, got it. headerClass of tabPanel applied to whole headers row. And in your case - styleClass of every tab component should be used.

[lmk]

So, how can I use a specific style for rich-tabhdr-side-border class.

[ilya_shaikovsky]

yes.. this class seems can't be covered with corresponding class attribute.. feel free to rise an issue.

this could be used instead currently:

 <style>
#mypanel * .rich-tabhdr-side-border{
background-image: none !important;
border:none !important;
}
</style>
 <rich:tabPanel switchType="client" styleClass="menuTb" inactiveTabClass="myrich-tab-inactive" activeTabClass="myrich-tab-active" disabledTabClass="menuTb-tab-disable" id="mypanel">
 <rich:tab label="First" >
 Here is tab #1
 </rich:tab>
 <rich:tab label="Second" styleClass="header-empty" >
 Here is tab #2
 </rich:tab>
 <rich:tab label="Third" disabled="true">
 Here is tab #3
 </rich:tab>
 </rich:tabPanel>

[lmk]

it doesn't work;

No matter, I'll disable this classe for all tabPanels.

Jira created:https://jira.jboss.org/jira/browse/RF-7539


Kind regards!