Label for p:selectBooleanCheckbox displayed underneath checkbox

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
pholding
Posts: 27
Joined: 25 Feb 2014, 21:19

06 May 2017, 23:47

Hi

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>
Kind Regards

Paul

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

08 May 2017, 09:17

Please try;

Code: Select all

//CSS
<style type="text/css">
    body .booleanCheckbox.ui-chkbox {
        width: auto;
    }

    body .booleanCheckbox .ui-chkbox-box {
        display: inline-block;
        vertical-align: middle;
        margin-right: 4px;
    }

    body .booleanCheckbox .ui-chkbox-label {
        vertical-align: middle;
        margin-top: 0;
    }
</style>

//XHTML
<p:selectBooleanCheckbox itemLabel="Test" styleClass="booleanCheckbox"/>

pholding
Posts: 27
Joined: 25 Feb 2014, 21:19

08 May 2017, 21:51

Hi Aragorn

Thanks, the fix you provided has resolved the issue.

Ideally I'd prefer not to include the additional ".booleanCheckbox" CSS selector every time the p:selectBooleanCheckbox component is used, so I've done a quick test using just the ".ui-chkbox", ".ui-chkbox-box", and ".ui-chkbox-label" selectors which seems to be ok. Do you know if there are likely to be any issues without using the additional ".booleanCheckbox" CSS selector?

Also, is your fix likely to be included in the next version of the Barcelona layout?

Kind Regards

Paul

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

11 May 2017, 10:57

Hi @pholding,

Could you please check custom css solution on other checkbox components? I'll check it.

pholding
Posts: 27
Joined: 25 Feb 2014, 21:19

14 May 2017, 19:13

Hi Aragorn

The issue with the label being mis-aligned also occurs with the p:triStateCheckbox component but the p:selectManyCheckbox component is fine.

If I add the custom CSS solution then it fixes the issue with both the p:selectBooleanCheckbox and p:triStateCheckbox components and it doesn't seem to have any adverse impact on the p:selectManyCheckbox component. As far as I can tell the custom CSS solution is works with all of the PrimeFaces checkbox components.

Many thanks

Paul

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

14 May 2017, 22:24

Thanks a lot for the update, @Paul ;)
I'll add this fix after checking it on other components.

Post Reply

Return to “Barcelona - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests