问题

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)?

回答1:

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

回答2:

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

回答3:

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>

来源：https://stackoverflow.com/questions/3547485/how-to-control-alignment-of-datatable-inside-of-a-panelgrid

标签

css

jsf

datatable

alignment

panelgrid

How to control alignment of DataTable inside of a PanelGrid?