p:layout content not shown with HTML element

Question

I'm using JSF 2.2 and PrimeFaces 5.2. The content of my layout is not displayed if I use an HTML element inside this layout as you can see in the image below. If I put the HTML element outside of the layout, then everything works.

left: without <h1> element / right: with <h1> element

Did I overlook something or is there a reason for this behavior? I'm quite new to JSF.

---

Code

content of <h:body>

<h:form style="max-width:1000px; margin-bottom: 20px;">
    <p:tabMenu activeIndex="1">
        <p:menuitem value="Rechnung" icon="ui-icon-home" url="index.xhtml" />
        <p:menuitem value="Bearbeiten" icon="ui-icon-pencil" url="editor.xhtml" />
    </p:tabMenu>
</h:form>

<p:layout style="max-width:1000px;">
    <p:layoutUnit position="center" style="border: none;">
        <p:layout style="border: none;">
            <p:layoutUnit position="west" size="250" style="border: none;">
                <h:form>
                    <p:menu>
                        <p:submenu label="Tabellen">
                            <!-- some <p:menuitem> -->
                        </p:submenu>
                    </p:menu>
                </h:form>
            </p:layoutUnit>

            <p:layoutUnit position="center" style="border: none;">
                <h1>Testresult</h1> <-- don't work
                <p:outputLabel value="test text"/> <-- works
                <!-- table -->
            </p:layoutUnit>
        </p:layout>
    </p:layoutUnit>
</p:layout>

Answer 1

When i talked to Cagatay Civici during a JSF class, he recommended us not to use layouts(p or pe) and instead use regular divs to manage layouts. Nested layouts were definitely not recommended.

So our layout page went from

 <pe:layout fullPage="true" id="layoutFull">


        <pe:layoutPane id="idar758" position="north" closable="false" collapsible="false" size="60"
            collapsed="false" resizable="false">
            <h:form id="postLoginHeader">
                <ui:include src="./loginHeader.xhtml"/>
            </h:form>
        </pe:layoutPane>

        <p:layoutUnit position="center" closable="false" collapsible="false"
            collapsed="false" resizable="false" resizeWhileDragging="false"
            id="centerLayout">
            <div id="idar759" class="slimScrollMyPage1">
                <h:panelGrid id="panelGroup_38" columns="1" width="100%">
                    <p:messages globalOnly="true" autoUpdate="true" id="messages"
                        rendered="true" closable="true">
                        <p:effect id="idar760" type="bounce" event="load" delay="500" />
                    </p:messages>
                    <ui:insert name="body" id="insert_38" />
                </h:panelGrid>
            </div>
        </p:layoutUnit>

        <pe:layoutPane id="idar761" position="west" closable="true" resizable="false"
            resizeWhileDragging="false" size="235">
            <div id="idar762" class="slimScroll">
                <ui:include src="leftMenuAdmin.xhtml" id="include_36" />
            </div>
            <br />
            <p:spacer height="5" />
        </pe:layoutPane>

        <pe:layoutPane id="idar763" position="south" closable="false" size="30">
            <h:panelGroup id="panelGroup_40south">
                <ui:include src="./footer.xhtml" />
            </h:panelGroup>
        </pe:layoutPane>
    </pe:layout>

to

<ui:include src="./adminPostLoginHeader.xhtml" />
    <div class="container" id="div_23">
        <h:panelGrid columns="2" id="panelGrid_34"
            columnClasses="layoutColumn1,layoutColumn2">
            <h:panelGroup id="panelGroup_35">
                <div class="collapsible">
                    <p:commandButton value=" " />
                    <div id="idar762" class="slimScroll">
                        <ui:include src="leftMenuAdmin.xhtml" id="include_36" />
                    </div>
                </div>
            </h:panelGroup>
            <h:panelGroup id="panelGroup_37" width="100%">
                <div id="idar759" class="slimScrollMyPage1 bckgroundDiv"
                    style="background-image: url(#{serverThemeBean.landingImageUrl}) !important;">
                    <h:panelGrid id="panelGroup_38" columns="1" width="100%">
                        <p:messages globalOnly="true" autoUpdate="true" id="messages"
                            rendered="true" closable="true">
                            <p:effect id="idar760" type="bounce" event="load" delay="500" />
                        </p:messages>
                        <ui:insert name="body" id="insert_38" />
                        <p style="padding-bottom: 5px;" id="p_39" />
                    </h:panelGrid>
                </div>
            </h:panelGroup>
        </h:panelGrid>
    </div>
    <h:panelGroup>
        <ui:include src="./adminPostLoginFooter.xhtml" />
    </h:panelGroup>