All geek questions in one place

How to change h: selectManyCheckbox layout to have multiple lines?

I am currently working on a search that goes through the database and delivers the result in the form h:dataTablein my web application. However, it h:dataTablehas quite a few extra lines.

Simple code of mine 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 mine, h:selectManyCheckboxit just displays all of my 30 checkboxes on one line, completely ruining the site design.

However, after looking at possible layout options, there seem to be only two.

Either display them all in one line horizontally, as by default, or display them all vertically. I prefer the layout of something along lines of several lines with 5 flags.

How do I achieve this?

+4
3

float block clear float Xn+(X+1) child, X - . , , 100%/X , + .

, :

<h:selectManyCheckbox styleClass="grid">

, :

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

, :

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

, :

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

.

+3

, - , "" ( ). MS Edge, IE 11 - . ?

0

, , , "" ( ). MS Edge/IE11, IE 11.

, , DOM Javascript . 'onload' <body>. <h:selectManyCheckBox id="MyManyCheckBox" 'form:identifier' - 'id=...' <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
}
0

Source: https://habr.com/ru/post/1661464/

More articles:


All Articles