The following image illustrates the problem:
selectManyCheckboxProblem by John Gravell, on FlickrMore details:
The layout of the selectManyCheckbox is "grid"; using "responsive" does not produce the problem
The behavior can be avoided by doing any of the following (that we do not want to do)
- Changing the number of columns to a number that evenly divides into the number of the selectmanyCheckbox selectitems
- Removing all the selectitems from the preceding p:selectOneMenu
- Changing the preceding p:selectOneMenu to an h:selectOneMenu
Below is the code for the template, the page, and the popup dialog
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:sec="http://www.springframework.org/security/tags">
<f:view contentType="text/html; charset=UTF-8">
<h:head>
<ui:insert name="headIncludes"/>
<title><ui:insert name="title">Default title</ui:insert></title>
</h:head>
<h:body>
<table class="documentContainer">
<tr><td><ui:insert name="baseContent"><p>Default base content</p></ui:insert></td></tr>
</table>
</h:body>
</f:view>
</html>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:sf="http://www.springframework.org/tags/faces"
xmlns:p="http://primefaces.org/ui"
template="/WEB-INF/templates/baseTemplate.xhtml">
<ui:define name="title">Users</ui:define>
<ui:define name="baseContent">
<h:form id="form">
<h3><h:outputText value="Administer Users"/></h3>
<p:commandButton value="New User"
id="newUserButton"
oncomplete="PF('userDialog').show();" />
<ui:include src="userDialog2.xhtml" />
</h:form>
</ui:define>
</ui:composition>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:sf="http://www.springframework.org/tags/faces"
xmlns:p="http://primefaces.org/ui">
<p:dialog header="Edit User"
id="userDialogId"
widgetVar="userDialog"
modal="true"
width="700"
height="auto" >
<h:panelGrid columns="2" >
<p:outputLabel for="editCustomerIn">Customer Name:</p:outputLabel>
<h:panelGroup id="customerNamePanelGroup">
<p:selectOneMenu id="editCustomerIn"
style="width:400">
<f:selectItem itemLabel="Exxon" itemValue="Exxon" />
<f:selectItem itemLabel="Kellogs" itemValue="Kellogs" />
<f:selectItem itemLabel="Target" itemValue="Target" />
</p:selectOneMenu>
</h:panelGroup>
</h:panelGrid>
<h:panelGrid id="rolesPanel" columns="2">
<p:outputLabel for="roles">Companies:</p:outputLabel>
<p:selectManyCheckbox label="Roles"
id="roles"
layout="grid"
columns="3"
style="text-align:left">
<f:selectItem itemLabel="Exxon" itemValue="Exxon" />
<f:selectItem itemLabel="Kellogs" itemValue="Kellogs" />
<f:selectItem itemLabel="Target" itemValue="Target" />
<f:selectItem itemLabel="Ford" itemValue="Ford" />
<f:selectItem itemLabel="Boeing" itemValue="Boeing" />
<f:selectItem itemLabel="Google" itemValue="Google" />
<f:selectItem itemLabel="IBM" itemValue="IBM" />
<f:selectItem itemLabel="Trek" itemValue="Trek" />
<f:selectItem itemLabel="Alcoa" itemValue="Alcoa" />
<f:selectItem itemLabel="Dell" itemValue="Dell" />
</p:selectManyCheckbox>
</h:panelGrid>
<p:panel style="margin: 10px auto; text-align: center; border:none" >
<h:panelGroup id="commandButtonPanel" >
<p:commandButton id="saveButton"
value="Save"
onclick="PF('userDialog').hide(); return false;"/>
<p:commandButton id="cancelButton"
value="Cancel"
onclick="PF('userDialog').hide(); return false;" />
</h:panelGroup>
</p:panel>
</p:dialog>
</ui:composition>
