How to using CSS to set content of column to top not center in JSF, primefaces?

Question

I have a panelGrid with some columns but content of one column always at center, how cant I take it to top. I have 2 columns and when content of them not same height, on columns will stay on center, so bad. Tks for help!

make sure the Question is very clear – Dinesh Kanivu Sep 25 '13 at 08:47 — Dinesh Kanivu, Sep 25 '13 at 08:47

score 2 · Accepted Answer · edited May 23 '17 at 12:20

You need to set the CSS vertical-align property to top on the generated HTML <td> element. Assuming that you want to apply this on the entire <p:panelGrid> throughout all pages, then this should do:

.ui-panelgrid td {
    vertical-align: top;
}

Or, if you want to apply it on a specific <p:panelGrid> only, then do:

<p:panelGrid ... styleClass="aligned-top">

with

.ui-panelgrid.aligned-top td {
    vertical-align: top;
}

Or, if you want to apply it on a specific <p:panelGrid> column only, e.g. the second column only, then do:

<p:panelGrid ... columns="3" columnClasses="none,aligned-top,none">

with

td.aligned-top {
    vertical-align: top;
}

How to using CSS to set content of column to top not center in JSF, primefaces?

1 Answers1

See also: