p:selectbooleancheckbox is moving when slected in a p:dataTable

Question

I placed a p:selectBooleanCheckbox inside a p:dataTable in a JSF project.

When the cell is selected the check box floats to the right. I know it's a css thing but i'm not sure how to fix it.

<p:cellEditor>
    <f:facet name="output">
        <p:selectBooleanCheckbox id="hasUserOutputCheckBox" value="#{customerBean.selectedReference.hasUser}"/>
    </f:facet>
    <f:facet name="input">
        <p:selectBooleanCheckbox id="hasUserInputCheckBox" value="#{customerBean.selectedReference.hasUser}"/>
    </f:facet>
</p:cellEditor>

Answer 1

The issue is that the editable table cell has a padding of 1rem (PrimeFaces 10, Saga theme) in output mode, but a padding of 0 in input mode. This is caused by the rule:

.ui-datatable .ui-datatable-data tr.ui-row-editing td.ui-editable-column {
    padding: 0;
}

You can fix this difference by adding a padding of 1rem to your checkbox in input mode.

Tested with:

<p:dataTable value="#{testView.bools}" var="bool" editable="true">
    <p:column headerText="bool">
        <p:cellEditor>
            <f:facet name="output">
                <p:selectBooleanCheckbox value="#{bool}" disabled="true"/>
            </f:facet>
            <f:facet name="input">
                <!-- Add padding here: -->
                <p:selectBooleanCheckbox value="#{bool}" style="padding:1rem"/>
            </f:facet>
        </p:cellEditor>
    </p:column>
    <p:column style="width:6rem">
        <p:rowEditor/>
    </p:column>
</p:dataTable>

Result:

Note that the actual padding you need to use might depend on the PrimeFaces version and the theme you are using. So, check the actual padding first using your browser's debugging tools.

See also:

• How do I override default PrimeFaces CSS with custom styles?