I've found an issue with the p:selectBooleanCheckbox component which causes the label to be displayed underneath the checkbox rather than to the right of the checkbox. I'm seeing this issue on Chrome 57, Firefox 53 and Internet Explorer 11 on Windows 10.
Is this expected behavior and is there anything that can be done to align the label to the right hand side of the checkbox?
The code for the xhtml page I'm using is as follows
Code: Select all
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
</f:facet>
<h:outputScript name="js/ripple.js" library="barcelona-layout" />
<h:outputScript name="js/layout.js" library="barcelona-layout" />
</h:head>
<h:body>
<p:selectBooleanCheckbox itemLabel="Test" />
<h:outputStylesheet name="css/layout-#{guestPreferences.layout}.css" library="barcelona-layout" />
<h:outputStylesheet name="css/ripple.css" library="barcelona-layout" />
</h:body>
</html>
Paul