jsf - Primefaces selectManyCheckbox在列中从上到下布局

Question

任务：有一个面板，带有 selectMany 复选框，有 5 列。选择框的值按升序排列，但它们在列中从左到右显示，而不是从上到下。

使用：Primefaces 代码：

<p:selectManyCheckbox id="chkbx" value=.. layout="grid" columns="5">
<p:selectItems value=.. itemValue=".." itemLabel=".."/>
</p:selectManyCheckbox>

当前画面：

[] a    [] b    [] c  

[] d    [] e    [] f

[] g    [] h    [] i

预期的：

[] a    [] d    [] g  

[] b    [] e    [] h

[] c    [] f    [] i

Answer 1

幸运的是，我们有 CSS 来拯救这里。展示柜有一个网格布局示例

如果您查看生成的 html，您会看到类似

<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>

是的，这里使用了一个表格，但人们经常忘记您可以使用 CSS 覆盖现有元素的 CSS，因此您可以将table、tbody和显示为“flex”而不是默认显示值tr。td只需使用下面的 CSS 即可。

table.ui-selectmanycheckbox, table.ui-selectmanycheckbox tbody ,table.ui-selectmanycheckbox tr, table.ui-selectmanycheckbox td{
    display: flex;
}

现在的诀窍是玩cssflex-direction并分配row给tbody和column类似tr的

table.ui-selectmanycheckbox tbody{
    flex-direction: row;
}

table.ui-selectmanycheckbox tr{
    flex-direction: column;
}

结果如下：

如果您希望它仅应用于一个选择，请向组件添加一个显式类并在选择器中使用它。