Primefaces layout

Question

I have a primefaces layout which has defined the property fullpage as false (since I dont want the hole content of my page to fit the browser without scrolling), the problem is that when I define a layout unit for the footer (position = south), it is rendered before the header! Please help, here's part of my code as well as an image;

<p:layout fullPage="false">
            <!-- HEADER -->
            <ui:insert name="headerModelA">
                <p:layoutUnit position="north" size="165">  
                    <p:panelGrid >
                       <!-- code -->
                    </p:panelGrid>
                </p:layoutUnit>
            </ui:insert>
            <!-- LEFT -->
            <p:layoutUnit position="west" size="150" header="Left Panel">  
                <h:outputText value="West unit content." />  
            </p:layoutUnit>  
            <!-- RIGHT -->
            <p:layoutUnit position="east" size="200" header="Right Panel">  
                <h:outputText value="Right unit content." />  
            </p:layoutUnit>  
            <!-- CENTER CONTENT -->
            <p:layoutUnit position="center">  
                <ui:insert name="mainContentA">
                    <h:form id="formBanner">
                        <!-- some other content -->
                    </h:form>          
                </ui:insert>
            </p:layoutUnit>
            <!-- FOOTER -->
            <ui:insert name="footer">
                <p:layoutUnit position="south" size="100">
                    <!-- footer info -->
                </p:layoutUnit> 
            </ui:insert>
</p:layout>

enter image description here

What happens if you don't use an insert and render a simple tag? Does it render correctly? Alternatively nest -> <south><insert /></south> and see if that works. — Daniel B. Chapman
without the insert tags the problem remains. Don't understand the alternative nest you suggest... is that a PF component? or a simple HTML component? Thanks for answering! — Rodrigo Martinez
It's pseudo code. I'm suggesting the insert might be the problem. If you removed it and a simple example doesn't work then it sounds like bad CSS to me. — Daniel B. Chapman

Rafa Hernández Rafa Hernández · Accepted Answer · 2014-04-10T10:22:38

It's could be a bug. fullPage="false" the south panel have a style with position:absolute and top:0px and the div show on top.

Try to force the style. Adjust top pixels to your applicacion.

<p:layoutUnit position="south" size="100" 
style="postion:relative !important; top:400px !important">

Complete Code

<p:layout fullPage="false">
            <!-- HEADER -->
                <p:layoutUnit position="north" size="165">  
            <ui:insert name="headerModelA">
                    <p:panelGrid >
                                           <h1>NORTE</h1>

                    </p:panelGrid>
            </ui:insert>
                </p:layoutUnit>
            <!-- LEFT -->
            <p:layoutUnit position="west" size="150" header="Left Panel">  
                <h:outputText value="West unit content." />  
            </p:layoutUnit>  
            <!-- RIGHT -->
            <p:layoutUnit position="east" size="200" header="Right Panel">  
                <h:outputText value="Right unit content." />  
            </p:layoutUnit>  
            <!-- CENTER CONTENT -->
            <p:layoutUnit position="center">  
                <ui:insert name="mainContentA">
                    <h:form id="formBanner">
                    <h1>CENTER</h1>
                    </h:form>          
                </ui:insert>
            </p:layoutUnit>
            <!-- FOOTER -->
                <p:layoutUnit position="south" size="100" style="postion:relative !important; top:400px !important">
            <ui:insert name="footer">
                    <h1>FOOTER</h1>
            </ui:insert>
                </p:layoutUnit> 
</p:layout>

Primefaces layout

1 Answers