JSF CSS panelGrid - how to make its contained elements all constant width

Question

For instance, right now I am trying to add a panelGrid to my page that contains X buttons. Each button has different lengths depending on how long the text is associated with it. I want to be able to specify at the panelGrid level to make sure every component stretches to meet the width of the panelGrid itself - instead of having to manually set the width for X number of buttons.

It has to be related to columnClasses and setting the width via CSS but the attempts I made did not work. For instance I set the styeClass on the panelGrid to a class that had a width of 100px. Then I attempted setting the ColumnClass to that CSS class as well - still no dice.

Thoughts?

Answer 1

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

You can set the buttons to equal width using this CSS:

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

This sets the table to be 300 pixels wide, the cells to be half the width of the table and the buttons to take up most of the cell width. The columns might not be of equal width if a button's natural length is over 150px, but you could probably overcome that using the overflow rules or something.