How to control alignment of DataTable inside of a PanelGrid?

StackOverflow https://stackoverflow.com/questions/3547485

문제

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:

  1. View the JSF page in a browser.
  2. Right-click the page.
  3. 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:

다른 팁

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>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top