0

I have a primefaces selectManyCheckbox element with dynamic content:

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

I face a css issue, when the label is too long, it goes underneath the checkbox element.

enter image description here

Is there any approach to show label right to the checkbox and break? something like this to better understand:

enter image description here

Falco
  • 1,458
  • 3
  • 19
  • 47
  • 1
    You can also try this solution which sounds exactly like your problem: https://forum.primefaces.org/viewtopic.php?t=50771 – Melloware May 18 '20 at 11:25
  • 3
    Does this answer your question? [Label does not align when using long text on a p:selectOneRadio](https://stackoverflow.com/questions/61104787/label-does-not-align-when-using-long-text-on-a-pselectoneradio) – WoAiNii May 19 '20 at 17:42

2 Answers2

0

After reading How to align checkboxes and their labels consistently cross-browsers I was able to try a solution that fit to my issue. I guess the right solution depends on the rest of the styles coming from various css.

Anyway for me worked:

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

The link above was very exhaustive, I suggest to try some combinations of those solutions to anybody has similar problems.

Falco
  • 1,458
  • 3
  • 19
  • 47
  • 2
    Did you try the link provided by @WoAiNii on the question... looks like that is less dependent on default paddings etc... – Kukeltje May 19 '20 at 18:36
-1

You can also apply style to td to avoid that margin and padding adjusments

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