2 Replies Latest reply on Sep 15, 2010 6:24 AM by c.kloy

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

    c.kloy

      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

      Christian

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

          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>

           

           

          test.png

          • 2. Re: TabPanel - different stylesheets for left and right border of a tab
            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 !?