Menu
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)?
706
JSF renders as HTML and can be styled with CSS. Inspect the element as follows:
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;
}
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;
}
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.
See also:
180
you can use CSS to make the panelgrids to top align.
.mystyle {
vertical-align: top;
horizontal-align: center;
}
include in your xhtml files.
<link href="#{resource['css:style.css']}" rel="stylesheet" type="text/css"/>
and add this code in parent panelgrid.
<h:panelGrid columns="3" columnClasses="mystyle, mystyle, mystyle">
Note:for 3 columns you hav to include it 3 times
6
You can avoid applying it to every td, only inside panelGrid and datatable inside that. I had the same problem and the following worked for me:
.pgstyle td{
vertical-align: top;
}
Where pgstyle is the styleClass you give to every panelGrid contains a datatable, like:
<h:panelGrid columns="1" styleClass="pgstyle">
<rich:dataTable ..>
....
</rich:dataTable>
</h:panelGrid>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
