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

Question

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

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

How do can I do this?

Don't know wheather you tried or not but try responsive design with primefaces you can achieve it i guess. — techipank, May 06 '16 at 04:42
responsive design was introduced in PF 5, unfortunately I can't upgrade from PF4 to PF5 in this case — Leo, May 06 '16 at 11:54
Why should it resize in this case? As mentioned in the PF forum, you have to be specific in how things should resize. And in this case you have a resize component around the picklist to — Kukeltje, May 06 '16 at 22:30
looking at the pictures I've added, how do you think the component shoud be resized? how professional components usually behave in this situation? IMO it's pretty obvious that each part of the component should adjust to the parent container keeping the proportion, don't you think? — Leo, May 06 '16 at 22:39
@Leo please give the source code for the dialog, it will be easier to make suggestions — Tair, May 08 '16 at 17:12

score 2 · Accepted Answer · edited May 23 '17 at 12:08

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

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

1 Answers1