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

Question

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

3.3k Views Asked by APL At 21 November 2016 at 13:33

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?

Original Q&A

There are 2 best solutions below

**BalusC** · Answer 1 · 2017-08-24T21:07:49.243000

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-17T17:19:08.407000

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?

There are 2 best solutions below

Related Questions in CSS

Related Questions in JSF

Related Questions in LAYOUT

Related Questions in SELECTMANYCHECKBOX

Trending Questions

Popular # Hahtags

Popular Questions