p:selectBooleanCheckbox UI-Issue with Babylon

[christophs78]

Code: Select all

<h:form>
		<p>
			<p:selectBooleanCheckbox id="checkbox4"/>
			<p:outputLabel for="checkbox4" value="die vierte Checkbox"/>
			
			<p:selectBooleanCheckbox id="checkbox5"/>
			<p:outputLabel for="checkbox5" value="die fünfte Checkbox"/>
		</p>

		<p>
			<p:selectBooleanCheckbox itemLabel="die erste Checkbox" />
			<p:selectBooleanCheckbox itemLabel="die zweite Checkbox" />
			<p:selectBooleanCheckbox itemLabel="die dritte Checkbox" />
		</p>	
</h:form>

Babylon:


Nova-Light:


Babylon-CSS:

Code: Select all

body .ui-chkbox {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    width: 20px;
    height: 20px;
}

Nova-Light-CSS:

Code: Select all

body .ui-chkbox {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    height: 20px;
}

Babylon defines width for .ui-chkbox. So the work-around is to define the following CSS within the project.

Code: Select all

/* Fix für p:selectBooleanCheckbox */
body .ui-chkbox {
	width: auto;
}

[mert.sincan]

Thanks a lot! Fixed now.

Best Regards,