jsf - Primefaces selectManyCheckbox在列中从上到下布局
问题描述
任务:有一个面板,带有 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
解决方案
幸运的是,我们有 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;
}
结果如下:
如果您希望它仅应用于一个选择,请向组件添加一个显式类并在选择器中使用它。
推荐阅读
- ansible - 使用带有 Ansible 的 jinja 模板陷入循环情况
- api - JMeter 测试包含 @ 作为路径参数的 url
- python - Python打印函数城市名称
- reactjs - 在表格记录中包含您的通讯日
- windows - 使用 buildmode=c-shared 为 windows/arm 和 arm64 编译 Go
- sequelize.js - 在 sequelize-typescript 中涉及另一个字段来设置功能
- r - 如何在 R Studio 中合并行的单元格内添加换行符?
- c# - 当我创建/编辑自定义组合框时,键盘的 Blinker/Caret 被禁用
- node.js - 解决递归 socket.on("data") 调用
- java - 关于命令行程序输入的问题