jsf - 调整 p:dialog 的大小时如何调整 p:pickList 的大小？

Question

我有一个包含 ap:pickList 的 PF4 p:dialog。

当我调整 p:dialog 的大小时，它不会调整 p:picklist 的大小

我该怎么做？

Answer 1

基本上呈现如下<p:pickList>HTML ：<table>

<table class="ui-picklist">
    <td><ul class="ui-picklist-list">[left list]</ul></td>
    <td>[buttons]</td>
    <td><ul class="ui-picklist-list">[right list]</ul></td>
</table>

在默认的 PrimeFaces CSS 中， 的.ui-picklist-list固定宽度为200px.

我们希望将其设为最小宽度，并使包含左右列表的表格单元格扩展至最大宽度（50% 即可）。

总而言之，只需将这些 CSS 规则添加到在 PrimeFaces CSS之后加载的样式表文件就足够了。

.ui-picklist td:first-child,
.ui-picklist td:last-child {
    width: 50%;
}
.ui-picklist .ui-picklist-list {
    width: auto;
    min-width: 200px;
}