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

Question

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

当我调整 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。

我们想将其改为最小宽度，并使包含左右列表的 table 单元格扩展到最大值（50% 即可）。

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

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

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

How do I resize p:pickList when p:dialog is resized?

jsf

resize

primefaces

jsf-2

picklist