Primefaces selectManyCheckbox layout from top to bottom in columns

Question

Task: There is a panel, with selectMany checkboxes, having 5 columns. The values of selectboxes are ordered by ascending, but they appear from left to right in columns instead of top to bottom.

Using: Primefaces Code:

<p:selectManyCheckbox id="chkbx" value=.. layout="grid" columns="5">
<p:selectItems value=.. itemValue=".." itemLabel=".."/>
</p:selectManyCheckbox>

Current screen:

[] a    [] b    [] c  

[] d    [] e    [] f

[] g    [] h    [] i

Expected:

[] a    [] d    [] g  

[] b    [] e    [] h

[] c    [] f    [] i

That are 3 columns not 5 .. Anyway you'll probably need to manually reorder the collection behind `` (if that tag exists ..) — BalusC, Oct 18 '19 at 12:40
Keep in mind that you can always use the custom layout? And if you are using a primeFaces version that supports ' responsive' layout for this component, there is a solution that works (but it makes responsiveness harder) — Kukeltje, Oct 18 '19 at 12:41
Oh my solution also seems to work for the mordern grid layout... I can create an answer for you during the weekedn — Kukeltje, Oct 18 '19 at 12:44
@BalusC Yes it's 3 here i had 5 in my code but i created example of 3. sorry for typo. — user9189379, Oct 18 '19 at 15:15

score 5 · Accepted Answer · edited Oct 21 '19 at 16:30

Luckily we have CSS to the rescue here. The showcase has a gridlayout example

If you take a look at the generate html, you'll see something like

<table id="j_idt701:grid" role="presentation" class="ui-selectmanycheckbox ui-widget">
    <tbody>
        <tr>
            <td>
                <div class="ui-chkbox ui-widget">
                    <div class="ui-helper-hidden-accessible">
                        <input id="j_idt701:grid:0" name="j_idt701:grid" type="checkbox" value="Miami" data-p-hl="manychkbox" data-p-grouped="true">
                    </div>
                    <div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default">
                        <span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c" />
                    </div>
                </div>
                <label for="j_idt701:grid:0">Miami</label>
            </td>
            <td>
                <div class="ui-chkbox ui-widget">
                    <div class="ui-helper-hidden-accessible">
                        <input id="j_idt701:grid:1" name="j_idt701:grid" type="checkbox" value="London" data-p-hl="manychkbox" data-p-grouped="true">
                    </div>
                    <div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default">
                        <span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c"/>
                    </div>
                </div>
                <label for="j_idt701:grid:1">London</label>
            </td>
            <td>
                <div class="ui-chkbox ui-widget">
                    <div class="ui-helper-hidden-accessible">
                        <input id="j_idt701:grid:2" name="j_idt701:grid" type="checkbox" value="Paris" data-p-hl="manychkbox" data-p-grouped="true">
                    </div>
                    <div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default">
                        <span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c"/>
                    </div>
                </div>
                <label for="j_idt701:grid:2">Paris</label>
            </td>
        </tr>
        <tr>...</tr>
        <tr>...</tr>
    </tbody>
</table>

Yes, a table is used here but people often forget that you can override the CSS of existing elements with CSS, so you can make the table, tbody, tr and td being displayed as 'flex' instead of the default display values. Just use the CSS below to make it do so.

table.ui-selectmanycheckbox, table.ui-selectmanycheckbox tbody ,table.ui-selectmanycheckbox tr, table.ui-selectmanycheckbox td{
    display: flex;
}

Now the trick is to play with the css flex-direction and assign row to the tbody and column to the tr like so

table.ui-selectmanycheckbox tbody{
    flex-direction: row;
}

table.ui-selectmanycheckbox tr{
    flex-direction: column;
}

With the following result:

And if you want it applied for just one select, add an explicit class to the component and use that in the selectors.

I know this either :D - lets delete this off topic chat – Selaron Oct 22 '19 at 10:06 — Selaron, Oct 22 '19 at 10:06

Primefaces selectManyCheckbox layout from top to bottom in columns

1 Answers1