如何在 primefaces selectManyCheckbox->selectItems->label 上应用样式？

Question

我有一个带有动态内容的 primefaces selectManyCheckbox 元素：

<p:selectManyCheckbox
    id="mySelectManyCheckbox"
    value="#{myView.mySelectManyCheckboxValue}"
    layout="responsive"
    columns="1"
>
    <f:selectItems
        value="#{myView.myCollectionOfCheckBoxes}"
        var="singleCheckbox"
        itemLabel="#{singleCheckbox.description}"
        itemValue="#{singleCheckbox.id}"
    />
</p:selectManyCheckbox>

我遇到一个 css 问题，当标签太长时，它会位于复选框元素下方。

是否有任何方法可以在复选框右侧显示标签并中断？这样的事情可以更好地理解：

Answer 1

阅读 How to align checkboxes and their labels consistently cross-browsers 后，我能够尝试适合我的问题的解决方案。我想正确的解决方案取决于来自各种 css.

的其余样式

无论如何对我有用：

body .ui-selectmanycheckbox label {
    margin-top: -22px !important;
    display: block !important;
    padding-left: 20px !important;
}

上面的 link 非常详尽，我建议尝试将这些解决方案组合起来，以解决遇到类似问题的任何人。

Answer 2

您还可以将样式应用于 td 以避免边距和填充调整

    .ui-selectmanycheckbox.ui-widget td, .ui-selectoneradio.ui-widget td {
    border: 0 none;
    white-space: nowrap;
}

如何在 primefaces selectManyCheckbox->selectItems->label 上应用样式？

How to apply style on primefaces selectManyCheckbox->selectItems->label?

css

jsf

styles

primefaces