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

Answer 1

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.