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

Housel

This is not supported in PrimeFaces 0.9.6 – Goldshell

That are 3 columns not 5 .. Anyway you'll probably need to manually reorder the collection behind <p:selectItems value> (if that tag exists ..) – Siftings

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) – Goldshell

Oh my solution also seems to work for the mordern grid layout... I can create an answer for you during the weekedn – Goldshell

@Siftings Yes it's 3 here i had 5 in my code but i created example of 3. sorry for typo. – Housel

@Goldshell Thank you I will be waiting for it. – Housel

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.

Goldshell

I know this either :D - lets delete this off topic chat – Footwork