2 Replies Latest reply on Nov 20, 2009 9:00 AM by Lotfi Mellouk

    layouts height problem

    Lotfi Mellouk Master

      hi all,

      Im using rich:page, layouts, with Facelets, dont know if I have to update layout classes in order to keep the body content of the page always inside the parent layouts, I have rich:panel inside wich is longer than the parent div and it the page content overpass the footer.

        • 1. Re: layouts height problem
          Ilya Shaikovsky Master

          please show the code snippets and css classes applied.

          • 2. Re: layouts height problem
            Lotfi Mellouk Master

            xhtml code:

            <rich:page xmlns="http://www.w3.org/1999/xhtml"
             xmlns:ui="http://java.sun.com/jsf/facelets"
             xmlns:h="http://java.sun.com/jsf/html"
             xmlns:f="http://java.sun.com/jsf/core"
             xmlns:rich="http://richfaces.org/rich"
             xmlns:a4j="http://richfaces.org/a4j" markupType="xhtml"
             contentType="text/html" id="pg">
             <f:facet name="pageHeader">
             <h:panelGroup>
             <link rel="stylesheet" type="text/css" href="./style/styles.css" />
             <link rel="stylesheet" type="text/css" href="./style/tabpanel.css" />
             <link rel="stylesheet" type="text/css" href="./style/template.css" />
             </h:panelGroup>
             </f:facet>
             <f:facet name="header">
            
             </f:facet>
             <f:facet name="footer">
            
             <h:panelGroup>
             <div class="rounded" style="background-color:#FFFFFF;"></div>
             <h:outputText value="Fooooter" />
             </h:panelGroup>
             </f:facet>
            
             <div id="ctn" style="height:100%;">
            
             <div id="leftCor">
            
             </div>
             <div id="rightCor" ></div>
            
             </div>
            
             <div id="center_ctn" style="float: left; width: 98%;height:100%;">
             <rich:layout id="ctn_p">
             <rich:layoutPanel id="topPos" position="top">
            
             <h2>title</h2>
            
             </rich:layoutPanel>
             <rich:layoutPanel position="bottom">
            
             <div>
            
             <div style="padding-left: 50px;"><ui:include
             src="user_identity.xhtml" /></div>
             </div>
            
            
            
             <div id="mybody" style="height:1500px;width:auto;border: 1px solid black;background-color: #9DFEFE;">
             <!-- div only for test it replaces insert body -->
             </div>
            
             </rich:layoutPanel>
             </rich:layout>
             </div>
            
            </rich:page>
            


            and css code:

            .rich-page-content {
            
            
            
             height: 100%;
            
            }
            
            
            
            .rich-page-main {
            
             height: 100%;
            
             width: 100%;
            
            
            
            
            
            }
            
            
            
            .rich-page-body {
            
            
            
             height: 100%;
            
             width: 100%;
            
            }
            
            
            
            #leftCor {
            
             background: #FFFFFF url(../images/rn_fade_bg.gif) repeat-x
            
             scroll;
            
             float: left;
            
             width: 1%;
            
             height: 100%;
            
            }
            
            
            
            #rightCor {
            
             background: #FFFFFF url("../images/topcorner.gif") no-repeat;
            
             float: left;
            
             width: 1%;
            
             height: 100%;
            
            }
            
            #center_ctn {
            
             background: #FFFFFF url(../images/grn_fade_bg.gif) repeat-x
            
             scroll 0 0;
            
             float: left;
            
             width: 100%;
            
             height: 100%;
            
            }
            
            
            
            #ctn_p {
            
             width: 100%;
            
             height: 100%;
            
            }
            


            thanks!