3 Replies Latest reply on May 10, 2008 4:33 PM by Sergey Smirnov

    richfaces panel not adapting to percentage height and width

    anjana patel Newbie

      we have our page designed in following way
      there is a main.xthml which has with html body tag
      <ui:insert name="dTab">Insert tabs</ui:insert>

      then there is templae.xhtml which implements the above template
      <ui:composition template="/devicemanager/main.xhtml">
      <ui:define name="dTab">
      <ui:insert name="headerPanel">Header Panel</ui:insert>
      <ui:insert name="bodyPanel">Body Panel</ui:insert>
      <ui:insert name="buttonsPanel">Buttons Panel</ui:insert>

      then there is page which implement the above template
      <ui:define name="headerPanel" >
      <h:panelGrid columns="1" style="width:100%;" >
      <ui:define name="bodyPanel" >
      <h:panelGrid id="panel" columns="2" style="width:100%;height:100%" columnClasses="hierarchyCol,editorCol" border="1">
      <rich:panel styleClass="leftpanel" > ....</rich:panel>
      <rich:panel styleClass="rightpanel" > ....</rich:panel>

      the css for hierarchycol is width:25%;vertical-align:top;height:100%;
      the css for editorcol is width:75%;,vertical-align:top;,height:100%;
      the css for leftpanel is border:0px;margin-right:0px;height:94%;overflow:auto;width:90%;
      the css for rigthpanel is border:0px;margin-right:0px;width: 99%;height: 94%;overflow: auto;

      with this setup the problem is the htmlpanel grid shrinks based on the data in the richpanel ideally it should adapt to browser height and width
      the richfaaces panel expands based on the data within that ideally it should be within the percentage specified and scrollbar should appear

      Can anyone please guide me what could be problem in above setup is there something missing in css or an component or facelets pages setup

      appreciate if some one can help us.


        • 1. Re: richfaces panel not adapting to percentage height and wi
          Sergey Smirnov Master

          if you replace rich:panel with just pure div, does the div works like you expect?

          • 2. Re: richfaces panel not adapting to percentage height and wi
            anjana patel Newbie

            replacing richpanel with div gives scrolling within percentage specified.
            However to clarify if the differenece beteween richfaces panel and div of html

            earlier to include left richfaces panel and right panel these component were embeded within panelgrid component when specifying percentage for richfaces panel it never took consideration of the style specified for these panel.

            when richfaces panel were changed to pure div element without any embedding of panel grid the same worked. so is the problem in the way the style was specified for richfaces or the way it is used embedding within the panel grid.

            basically our requirement is to have two vertical panel, left and right the data within th panel may expanded however the percentage alloted for these panel is fixed so the scroll should come automatically.

            we noticed that richfaces panel has a style class rich-panel body do we have to specify the desired css property in there , if yes doing do will it not affect other richfaces panel used in the application if the css is common for all entire application.

            appreciate if anybody can help us clear our understanding on using richfaces panel vertically with fixed percentage.

            • 3. Re: richfaces panel not adapting to percentage height and wi
              Sergey Smirnov Master

              rich:panel is div. header and body are other div inside it. No any height are specified by default.

              I have:

              <table style="height:300px" border="1">
               <td style="height:100%">
               <rich:panel style="height:100%">

              The panel fills the 100% of the table height