panelGroup mess up my layout.

Question

I have standard page layout: header + 2 blocks (left and right). Code are below

<h:panelGroup rendered="#{false}">
    <div id="center_header">
        <h:outputText value="#{ScholarActiveHub.selectedGroup.groupName}"/>
    </div>

    <div id="center_left">

    </div>

    <div id="center_right">
        <h:dataTable value="#{ScholarActiveHub.groupMembers}" var="item" style="margin-right: 10px;">
            <h:column>
                <h:outputText value="#{item}"/>
            </h:column>                    
        </h:dataTable>
    </div>     
</h:panelGroup>

I want turn on and off these <div> tag all at once, so I nested them inside a panelGroup. Now it turn on and off these <div> alright, but layout is all mess up. Any solution?

Answer 1

This shouldn't happen. In your code example, the <h:panelGroup> shouldn't render anything. But if it contains an attribute which should end up in HTML, like id, then it will render a <span> element. Check the generated HTML output in the webbrowser. Does it all look right? Does your CSS take this into account? Maybe you want it to be a block element as well? If you add layout="block" to the <h:panelGroup> then it will render a <div> instead of a <span>. This may be more what you want.