Wie ändere ich die Größe von p: pickList, wenn p: dialog verkleinert wird?

Question

Ich habe einen PF4 p: -Dialog mit einem p: PickList.

Wenn ich die Größe p: Dialog, es die Größe nicht p: Auswahlliste

Wie kann ich dies tun?

Answer 1

Die <p:pickList> macht im Grunde ein HTML <table> wie unten:

<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 dem Standard PrimeFaces CSS, die .ui-picklist-list eine feste Breite von 200px hat.

Wir möchten diese die Mindestbreite anstatt machen und die Tabellenzellen, um die linken und rechten Listen mit bis zu ihrer maximalen erweitern (50% ist OK).

Alles in allem, nur die CSS-Regeln zu der Stylesheet-Datei hinzufügen, die geladen wird after die PrimeFaces CSS sollte ausreichen.

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