0 Replies Latest reply on Jun 13, 2008 5:23 PM by Reid Swanson

    percent height not working in tabPanel

    Reid Swanson Newbie

      Hi,

      I'm trying to set the height of a tabPanel using a percentage but it doesn't seem to be working.

      <rich:panel id = "mainPanel" styleClass = "mainPanel">
       <a4j:outputPanel id = "mainTabOutputPanel" ajaxRendered = "true">
       <rich:tabPanel id = "mainTabPanel"
      switchType = "client"
      contentClass = "mainTabPanel"
      tabClass = "mainTab"
      style = "height: 100%">
       <rich:tab id = "readTab" label = "Read">
       </rich:tab>
       </rich:tabPanel>
       </a4j:outputPanel>
      </rich:panel>
      


      css
      .mainPanel {
       height: 80%;
       margin-left: auto;
       margin-right: auto;
       margin-top: 1em;
       width: 1020px;
      }
      
      .mainTabPanel {
       background-color: #EEEEEE;
       height: 100%;
      }
      
      .mainTab {
       height: 30px;
       font-size: 1.5em;
       width: 100px;
      }
      


      I've tried various combinations of setting the height in the css class and using the height parameter but neither does what I expect, which is for the tabPanel to roughly fill the outer panel. Instead the height is always only the size of the tallest element within

      Is there a way to get the tab panel to be a percentage height relative to the outer panel?

      Thanks for any help.

      Using Tomcat 6.0, RichFaces 3.2.0 and Sun RI JSF on a Mac 10.4.