arya-blue
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga-blue
vela-blue
Layout
Element layout is defined via "fullPage" attribute. Setting "fullPage" to false causes an element layout. An example below shows two element layouts with server-side state management. Try to resize, open or close panes and switch between layouts.

The entire layout is described by options (class LayoutOptions) which are bound to the "options" attribute of pe:layout. They are created like a Tree with parent-child relation. LayoutOptions is optional, it also possible to create a layout by options defined as attributes of pe:layoutPane. Note: LayoutOptions created as Java model takes precedence over layout options as tag attributes. It is up to you if you would like to use all available options via LayoutOptions or a limited set of options in pe:layoutPane.
Left
Center
Source

<h:panelGroup id="layoutsContainer">
    <p:commandButton value="Switch between element layouts" actionListener="#{elementLayoutController.toogleLayout}"
                     process="layoutsContainer" update="layoutsContainer" icon="ui-icon-newwin"/>

    <h:panelGrid id="layoutsGrid" columns="2" style="margin-top: 15px;" cellpadding="0" cellspacing="0">
        <pe:layout fullPage="false" style="width:450px; height:220px;"
                   options="#{elementLayoutController.layoutOptionsOne}"
                   rendered="#{elementLayoutController.layoutOneShown}"
                   state="#{elementLayoutController.stateOne}">
            <pe:layoutPane position="west">
                Left
            </pe:layoutPane>
            <pe:layoutPane position="center">
                Center
            </pe:layoutPane>
        </pe:layout>

        <pe:layout fullPage="false" style="width:450px; height:220px;"
                   options="#{elementLayoutController.layoutOptionsTwo}"
                   rendered="#{!elementLayoutController.layoutOneShown}"
                   state="#{elementLayoutController.stateTwo}">
            <pe:layoutPane position="east">
                <pe:layoutPane position="center">
                    <f:facet name="header">
                        Header East-Center
                    </f:facet>
                    East-Center
                </pe:layoutPane>
                <pe:layoutPane position="south">
                    <f:facet name="header">
                        Header East-South
                    </f:facet>
                    East-South
                </pe:layoutPane>
            </pe:layoutPane>
            <pe:layoutPane position="center">
                Center
            </pe:layoutPane>
        </pe:layout>
    </h:panelGrid>
</h:panelGroup>
            
Components and more
Documentation
Attributes (move mouse over the names to see data types)
Name Description
bindingAn EL expression referring to a server side UIComponent instance in a backing bean.Default is generated.
fullPageFull page layout mode.Default is true.
idUnique identifier of the component in a namingContainer.Default is generated.
maskPanesEarlyMask panes early during init.Default is false.
optionsLayout options (object or JSON string).
renderedBoolean value to specify the rendering of the component, when set to false component will not be rendered.Default is true.
resizerTipResizer tooltip.
sliderTipSlider tooltip.
stateSerialized layout state for server-side persistence.
stateCookiePersist state in cookie.Default is false.
styleInline style of the component.
styleClassStyle class of the component.
togglerTipClosedTooltip when toggler is closed.
togglerTipOpenTooltip when toggler is open.
widgetVarName of the client side widget.
PrimeFaces Extensions Showcase - © 2011-2025,PrimeFaces: 16.0.0-SNAPSHOT,PrimeFaces Extensions: 16.0.0-SNAPSHOT,JSF: Apache MyFaces Core 4.0 - Impl 4.0.3,Server: Apache Tomcat (TomEE)/10.1.52 (10.1.4),Build time: 2026-03-05 15:23