css - p:selectbooleancheckbox 在 ap:dataTable 中被选中时正在移动

Question

我在一个JSF项目中放置了p:selectBooleanCheckbox 一个。p:dataTable

当单元格被选中时，复选框向右浮动。我知道这是一个 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在输出模式下具有 (PrimeFaces 10, 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 版本和您使用的主题。因此，首先使用浏览器的调试工具检查实际的填充。

也可以看看：

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