PrimeFaces Extensions Showcase

Layout

Example of layout with iframe. You can use an iframe as layout pane without to worry about resizing issues, etc. To use an iframe as layout pane, simple put the iframe as direct child of the layout pane.

Note: If you use an iframe, it is recommended to set maskContents="true" to overcome resizing issues with iframes. If you use objects like applets, Google maps, etc. inside layout panes, it is recommended to set maskObjects="true". Also consider the option maskPanesEarly="true" on pe:layout if you are dealing with iframes or objects like applets, Google maps, etc. inside layout panes (see documentation). Please also see the styles for the class .ui-layout-mask in this example. This is the style class the iframe is masked with.

Show full page layout with iframe

Source

XHTML page


<h:form>
        <pe:layout maskPanesEarly="true">
            <pe:layoutPane position="north" size="85">
                North
            </pe:layoutPane>
            <pe:layoutPane position="center" maskContents="true">
                <iframe id="iframeCenter"
                        src="http://primefaces-extensions.github.io"
                        title="PFE Layout"
                        width="100%"
                        height="100%">
                </iframe>
            </pe:layoutPane>
            <pe:layoutPane position="west" size="250" resizeWhileDragging="false"
                           maxSize="500" minSize="100" resizable="true" closable="true">
                West
            </pe:layoutPane>
        </pe:layout>
    </h:form>

    <h:outputStylesheet library="css" name="global.css"/>

    <h:outputStylesheet id="layoutCSS">
        body {
            margin: 4px !important;
        }

        /* masks are usually transparent, but we make them visible here */
        .ui-layout-mask {
            background: #C00 !important;
            opacity: .20 !important;
            filter: alpha(opacity=20) !important;
        }
    </h:outputStylesheet>