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

Question

I have a PF4 p:dialog containing ap:pickList.

When I resize p:dialog, it does not resize p:picklist

How do can I do this?

Answer 1

The <p:pickList> renders basically a HTML <table> like below:

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

In the default PrimeFaces CSS, the .ui-picklist-list has a fixed width of 200px .

We'd like to make this the minimum-width instead and make the table cells containing the left and right lists expand to their maximum (50% is OK).

All in all, just adding those CSS rules to the stylesheet file which is loaded after the PrimeFaces CSS should suffice.

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