JSF CSS panelGrid - comment faire pour que ses éléments contenus soient tous de largeur constante

Question

Par exemple, en ce moment, j'essaie d'ajouter un panelGrid à ma page qui contient des boutons X. Chaque bouton a des longueurs différentes en fonction de la durée d'association du texte. Je veux être capable de spécifier au niveau de panelGrid pour m'assurer que chaque composant s'étire pour répondre à la largeur du panelGrid lui-même - au lieu de devoir définir manuellement la largeur pour X nombre de boutons.

Il doit être lié à columnClasses et la définition de la largeur via CSS, mais les tentatives que j'ai faites ne fonctionnaient pas. Par exemple, j'ai mis le styeClass sur le panelGrid à une classe qui avait une largeur de 100px. Ensuite, j'ai essayé de définir le ColumnClass à cette classe CSS - toujours pas de dés.

Pensées?

Answer 1

Pour cette panelGrid ...

<h:panelGrid styleClass="panelGridClass" columns="2"> 
    <h:commandButton value="b1" /> 
    <h:commandButton value="button 2" /> 
    <h:commandButton value="button 3 is really long" /> 
    <h:commandButton value="b4" /> 
    </h:panelGrid> 

Vous pouvez définir les boutons à largeur égale à l'aide de cette CSS:

TABLE.panelGridClass { 
    width: 300px; 
} 
TABLE.panelGridClass TR TD { 
    width: 50%; 
} 
TABLE.panelGridClass TR TD INPUT { 
    width: 95%; 
} 

Ceci définit la table à 300 pixels de large, les cellules à la moitié de la largeur de la table et les boutons pour occuper la plus grande partie de la largeur de la cellule. Les colonnes peuvent ne pas avoir la même largeur si la longueur naturelle d'un bouton est supérieure à 150px, mais vous pourriez probablement surmonter cela en utilisant les règles de débordement ou quelque chose.