JSF panelgrid alignment to top

Question

I see there are some answers posted for this. tried almost all of them with several permutation-combination.. but nothing seems to be working.

components inside panelgris are always middle aligned, instead of top.

tried whatever they said in the below post. How to control alignment of DataTable inside of a PanelGrid?

Please let me know if there is a remedy.

Answer 1

Use the panelGrid's columnClasses attribute to identify a CSS class that includes the vertical-align: top; style:

<h:panelGrid columns="2" columnClasses="topAligned">
...
</h:panelGrid>

and the CSS file:

.topAligned {
    vertical-align: top;
}

The contents of the first column in the panelGrid will then be top-aligned within their cells.

Answer 2

The <h:panelGrid> renders a HTML <table> element. The vertical alignment of a table cell <td> defaults indeed to middle. You want to make it to be top instead. This is easy with CSS.

<h:panelGrid styleClass="foo">

with

.foo td {
    vertical-align: top;
}

If you have a table inside the panelgrid for which you'd like to keep the default table cell vertical alignment of middle, then you need to alter the CSS as follows:

.foo>tbody>tr>td {
    vertical-align: top;
}

so that only the panelgrid's own table cells are top aligned.

To learn all about CSS, check http://www.csstutorial.net.