-
1. Re: TabPanel - different stylesheets for left and right border of a tab
renegritsch Sep 14, 2010 8:03 AM (in response to c.kloy)Hi we have the same problem ;-)
I´ve tried alot, we could remove everything but not the the left and right border.<style type="text/css">
.tabpanel {
background-image: none;
border-width: 0px;
border-style: none;
border-top-width: 0px;
border-top-style: none;
border-left-width: 0px;
border:0px;
}
.rich-tabhdr-side-cell {
border-width: 0px;
border-style: none;
border:none
}
</style>
<rich:tabPanel
style="tabpanel"
styleClass="tabpanel"
tabClass="tabpanel"
inactiveTabClass="tabpanel"
activeTabClass="tabpanel"
contentClass="tabpanel"
disabledTabClass="tabpanel"
headerClass="tabpanel"
contentStyle="tabpanel"
id="ID2A4E37FB" ignoreDupResponses="true" immediate="true" limitToList="true" reRender="modelView" selectedTab="#{wizardController.currentWizardPage}" switchType="client">
<rich:tab disabled="false" id="ID7B3A4CDC" label="Basis" switchType="client">
<f:facet name="label">
<rich:paint2D width="#{wizardTabGenerator.getWidth('Basisxxxxxxxxxxxxxx')}" data="Basisxxxxxxxxxxxxxx" height="#{wizardTabGenerator.getHeight()}" format="gif" paint="#{wizardTabGenerator.generateWizardTab}" />
</f:facet> -
2. Re: TabPanel - different stylesheets for left and right border of a tab
c.kloy Sep 15, 2010 6:24 AM (in response to c.kloy)Hi, i found a quick solution that solves my problem at the moment. I've written a js function that add a css-class to the left and right border.
function setTabStyles() {
var tabList = jQuery(".rich-tabhdr-side-cell");
for (var i = 0; i < tabList.length ; ++i)
{
var node = tabList[i];
var subNode = node.firstChild.firstChild.firstChild.firstChild;
if (jQuery(subNode).hasClass('rich-tab-active')) {
var leftClazz = ' activeLeftTabBorder';
var centerClazz = ' activeCenterTabBorder';
var rightClazz = ' activeRightTabBorder';
} else {
var leftClazz = ' inactiveLeftTabBorder';
var centerClazz = ' inactiveCenterTabBorder';
var rightClazz = ' inactiveRightTabBorder';
}
node.previousSibling.className += leftClazz;
node.className += centerClazz;
node.nextSibling.className += rightClazz;
}
}I add a call <script type="text/javascript">setTabStyles();</script> add the bottom of every tab.
I hope there will be a official solution from RichFaces !?