How to control alignment of DataTable inside of a PanelGrid?
I've got a multi-column panelGrid setup, with dataTables as each of the columns. Each of the dataTables is a different length. This results in the panelGrid stretching out to fit the largest dataTable (so far, that's good). The remaining dataTables are centered vertically (this is not good as it looks horrible on screen) instead of being top justified.
How can I tell panelGrid to top-justify contents? Or, is my approach completely wrong and I need to do something different (if so, suggestions are welcome)?
Answer
JSF renders as HTML and can be styled with CSS. Inspect the element as follows:
- View the JSF page in a browser.
- Right-click the page.
- Choose View Source.
The <h:panelGrid> renders an HTML <table> element; the <h:dataTable> renders as an HTML <table> element, as well. The data elements are nested inside the <td> element, rendered by the <h:panelGrid>. So, set the vertical-align of the <td> of the <h:panelGrid> to top.
Assuming that the <h:panelGrid> has an id which ends up as <table id="panelGridId"> in HTML, use the following CSS:
#panelGridId>tbody>tr>td {
vertical-align: top;
}
Forms
If the grid is part of a form, then the CSS will need to include the form's ID. For example:
<form id="amazingForm">
<h:panelGrid id="amazingGrid">
...
</h:panelGrid>
</form>
The CSS will resemble:
#amazingForm\:amazingGrid > tbody > tr > td {
vertical-align: top;
}
Example
Here's an example HTML document that shows vertical alignment working within a table configured using CSS:
<!-- language: html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 3547485</title>
<style>#myid>tbody>tr>td { vertical-align: top; }</style>
</head>
<body>
<table id="myid">
<tbody>
<tr>
<td><table><tbody><tr><td>n1a</td></tr><tr><td>n1b</td></tr></tbody></table></td>
<td><table><tbody><tr><td>n2a</td></tr></tbody></table></td>
<td><table><tbody><tr><td>n3a</td></tr><tr><td>n3a</td></tr><tr><td>n3c</td></tr></tbody></table></td>
</tr>
</tbody>
</table>
</body>
</html>
All get aligned to top. Without the rule, all get centered. It's hard to tell what rule exacty you need to apply since it's unclear how your generated markup look like.
Tutorials
See also: