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?
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, likeid, 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 addlayout="block"to the<h:panelGroup>then it will render a<div>instead of a<span>. This may be more what you want.