1) The third panel's selectManyCheckbox control is moved into the second panel's ContainerXX
2) The controls in the other 3 tabs are no longer present on those tabs. Inspect Element says all of the tab elements have all been moved into the first tab, but I don't see any of the controls there!
The interesting thing is that if I leave the selectManyCheckbox control in the second panel alone, and instead change the layout of the third panel's selectManyCheckbox to responsive, everything works as expected.
Here's some of my code:
Code: Select all
<h:body>
<div class="ContainerIndent">
<p:panel>
<div class="ContainerIndent">
<h:form id="deviceConfigForm">
<p:tabView id="deviceConfigTabView">
<p:tab title="Connectivity">
<div class="Container">
<div class="Container40 Responsive">
<div class="ContainerIndent">
<p:panel id="roamingConfigPanel" class="Wid70 MarAuto">
// facet header
<div class="Container">
<p:panelGrid class="Container100 Responsive100">
// inputText fields
</p:panelGrid>
</div>
</p:panel>
</div>
</div>
<div class="Container20 Responsive100">
<div class="ContainerIndent">
<p:panel id="channelSelectPanel24Ghz" class="Wid90 MarAuto">
// facet header
<div class="Container">
<div class="Container100 Responsive100">
<p:selectManyCheckbox id="channelSelect24Ghz"
value=""
converter="javax.faces.Integer
layout="responsive"
columns="3"
class="MarAuto">
<f:selectItems value=""/>
</p:selectManyCheckbox>
</div>
<div>
</p:panel>
</div>
</div>
<div class="Container40 Responsive100">
<div class="ContainerIndent">
<p:panel id="channelSelectPanel5Ghz" class="Wid80 MarAuto">
// facet header
<div class="Container">
<div class="Container100 Responsive100">
<p:selectManyCheckbox id="channelSelect5Ghz"
value=""
converter="javax.faces.Integer"
layout="grid"
columns="3"
class="MarAuto">
<f:selectItems value=""/>
</p:selectManyCheckbox>
</div>
</div>
</p:panel>
</div>
</div>
</div>
<div class="EmptyBox20"/>
<div class="Container">
<p:outputPanel id="connButtonPanel" class="TexAlRight">
// other controls
</p:outputPanel>
</div>
</p:tab>
<p:tab title="Miscellaneous">
<div class="Container">
<div class="Container100 Responsive100">
<p:panel id="miscTabPanel" class="Wid30 Responsive100 MarAuto">
// other controls that are getting moved
</p:panel>
</div>
</div>
</p:tab>
...
... more tabs
...
