2 Replies Latest reply on Sep 15, 2010 6:24 AM by Christian Kloy

    TabPanel - different stylesheets for left and right border of a tab

    Christian Kloy Newbie

      Hello together,


      We are using RF 3.3.3 on JSF 1.2_14 RI. There is a problem with the tabpanel, every tab in the tab-header get the same css-class for the left and right border. Is there a way to distinguish between the left and right border of a tab to use different stylesheets?


      Best Regards


        • 1. Re: TabPanel - different stylesheets for left and right border of a tab
          Rene Gritsch Newbie

          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;

          .rich-tabhdr-side-cell {
              border-width: 0px;
              border-style: none;

              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}" />




          • 2. Re: TabPanel - different stylesheets for left and right border of a tab
            Christian Kloy Newbie

            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 !?