p：SelectBooleanCheckBox在p：DataTable中选择时正在移动

Question

我在JSF项目的p:dataTable中放置了p:selectbooleancheckbox。

选中单元格时，复选框将向右浮动。我知道这是一个css的事情，但我不确定如何修复它。

<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

问题是，可编辑表格单元格在输出模式下有1rem(PrimeFaces10，Saga主题）的填充，但在输入模式下有0的填充。这是由以下规则造成的：

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

您可以通过在输入模式下的复选框中添加1rem的填充来修复此差异。

测试工具：

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

另见：

• 如何使用自定义样式覆盖默认PrimeFaces CSS？