How can I change the layout of h:selectManyCheckbox to have multiple rows?

Question

I'm currently working on a search which goes through a database and delivers the result in form of a h:dataTable in my web application. However that h:dataTable has quite a lot of optional rows.

Simple code of my h:selectManyCheckbox:

<h:panelGroup styleClass="panelGroup">
    <h:selectManyCheckbox value="#{searchBean.auswahl}">
        <f:selectItems value="#{searchBean.auswahl}" />
    </h:selectManyCheckbox>
</h:panelGroup>

With the default layout of my h:selectManyCheckbox it simply displays all my ~30 checkboxes in one row, completely ruining the design of the site.

However after looking into the possible layout options there only seem to be two.

Either displaying them all in one row horizontally as it does by default or displaying them all in one vertically. I rather want a layout of something along the lines of several rows with 5 checkboxes each.

How do I achieve that?

Is it absolutely necessary to use checkboxes ? you could use `...` to avoid all the cluter. — Esteban Rincon, Nov 21 '16 at 14:55
The problem with `selectManyCheckbox` is that the UIComponent creates checkboxes inside a `table` grid so even if you were to pass limitations *via* css or even bootstrap, i'll all get overriden by the component class from what I've tried. So maybe you could create your own **Custom UIComponent** that creates checkboxes in a LIST grid instead ? this would be easier to style. — Esteban Rincon, Nov 21 '16 at 15:03
I did actually have a 'code' selectManyListbox before implementing the 'code' selectManyCheckbox. The problem with this is that it does neither look nice nor is really nice to work with if you have over 30 possible selections. I guess I will have to look into creating an own custom component if I can't find anything else on that. — APL, Nov 22 '16 at 08:02
Look at the specs (or code completion in your IDE): https://docs.oracle.com/javaee/7/javaserver-faces-2-2/vdldocs-jsp/h/selectManyCheckbox.html Something about a layout attribute — Kukeltje, Nov 22 '16 at 08:21
The layout attribute sadly doesn't provide any options besides having it all in one row (horizontally) or one collum (vertically). — APL, Nov 22 '16 at 12:43

score 4 · Answer 1 · answered Aug 24 '17 at 21:07

Let all table cells float left as block elements and clear the float every Xn+(X+1) child, where X is the number of columns. To keep all nicely in line, make sure white space don't wrap and that the width is exactly 100%/X taking into account that box sizing covers padding+border.

In other words, given a:

<h:selectManyCheckbox styleClass="grid">

You can create a 3-column grid as below:

.grid td {
    display: block;
    float: left;
    white-space: nowrap;
    width: 33.3333333333%;
    box-sizing: border-box;
}
.grid td:nth-child(3n+4) {
    clear: left;
}

And a 4-column grid as below:

.grid td {
    display: block;
    float: left;
    white-space: nowrap;
    width: 25%;
    box-sizing: border-box;
}
.grid td:nth-child(4n+5) {
    clear: left;
}

And a 5-column grid as below:

.grid td {
    display: block;
    float: left;
    white-space: nowrap;
    width: 20%;
    box-sizing: border-box;
}
.grid td:nth-child(5n+6) {
    clear: left;
}

And so forth.

user3211098 · Answer 2 · 2018-12-18T10:18:39.650

The above solution is indeed what I need - except that I'm working in a 'compatibility' environment (company policy). It works in MS Edge/IE11 beautifully, but not in IE 11-compatibilty mode.

However, the answer to that is to go directly to the DOM in Javascript and reformat the table. The function could be called from the 'onload' event in the <body> The 'form:identifier' is the 'id=...' in the <h:selectManyCheckBox id="MyManyCheckBox"

function reformatSelectManyCheckbox() {
    var tabl=document.getElementById("form:MyManyCheckBox");
    var tr=tabl.rows;    // find the TR row
    var cells=tr[0].cells;  // all the cells (TD) on this row
    var g;
    var sz=cells.length;
    var r=0;               // index for the new rows
    var celln=0;           // index for the new cells, per row
    var row=null;
    for (g=0; g< sz; g++) {
            // I want 4 cells per row
        if(g % 4 == 0) { row=tabl.insertRow(r); r++; celln=0;}
        var cell = row.insertCell(celln);
        cell.innerHTML=cells[g].innerHTML;
        celln++;
    }
    tabl.deleteRow(r); // delete the original one line row
}

How can I change the layout of h:selectManyCheckbox to have multiple rows?

2 Answers2