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>

Do you have any css file in your project? In case you have, add styleClass attribute to your checkbox as: ```p:selectBooleanCheckbox styleClass="checkBoxStyle" ``` In css file, configure the class as: ``` .checkBoxStyle { vertical-align: middle; position: relative; } ``` — KnockingHeads, May 24 '21 at 09:01

Jasper de Vries · Answer 1 · 2021-05-24T13:13:06.260

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.

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

1 Answers1