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)?
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:
- HTMLDog CSS tutorial
- CSSTutorial.net
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
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>
加载中,请稍侯......
精彩评论