11

I see there are some answers posted for this. tried almost all of them with several permutation-combination.. but nothing seems to be working.

components inside panelgris are always middle aligned, instead of top.

tried whatever they said in the below post. How to control alignment of DataTable inside of a PanelGrid?

Please let me know if there is a remedy.

Community
  • 1
  • 1
user644745
  • 5,673
  • 9
  • 54
  • 80

3 Answers3

33

The <h:panelGrid> renders a HTML <table> element. The vertical alignment of a table cell <td> defaults indeed to middle. You want to make it to be top instead. This is easy with CSS.

<h:panelGrid styleClass="foo">

with

.foo td {
    vertical-align: top;
}

If you have a table inside the panelgrid for which you'd like to keep the default table cell vertical alignment of middle, then you need to alter the CSS as follows:

.foo>tbody>tr>td {
    vertical-align: top;
}

so that only the panelgrid's own table cells are top aligned.

To learn all about CSS, check http://www.csstutorial.net.

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • 1
    Hi, I added the code as follows, tried both the options you mentioned, but still not able to make it work. what is the mistake am i doing ? The panelgrid has 2 primefaces panel within it as follows. – user644745 Jul 27 '11 at 04:11
  • They aren't working for me, either. Did you ever figure this out? – user1539401 Dec 08 '20 at 22:21
7

Use the panelGrid's columnClasses attribute to identify a CSS class that includes the vertical-align: top; style:

<h:panelGrid columns="2" columnClasses="topAligned">
...
</h:panelGrid>

and the CSS file:

.topAligned {
    vertical-align: top;
}

The contents of the first column in the panelGrid will then be top-aligned within their cells.

Kevin Rahe
  • 1,609
  • 3
  • 19
  • 27
1

Use the styleClass for the panelGrid as in the following example code:

<h:panelGrid columns="2"  styleClass="top-aligned-columns" cellpadding="5" style="display:block" cellspacing="5"> 
    <p:outputLabel value="#{resources['IDNumber']}" />
    <p:inputText id="txtIDNumber" value="#{applicantBean.personal.idNumber}" />
</h:panelGrid>

Then in the css configure as follows:

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

With this method you will be able to not only top-align the rows but you can also apply the same styleClass to other panelGrids within the encompassing panelGrid.

For example:

   <h:panelGrid columns="3" styleClass="top-aligned-columns" cellpadding="5" style="display:block" cellspacing="5">
        <p:panel id="pnlApplicant" header="#{resources['ApplicantHeader']}" styleClass="no-border">
            <h:panelGrid columns="2" cellpadding="5" style="display:block" cellspacing="5" styleClass="top-aligned-columns">
            <p:outputLabel value="#{resources['IDNumber']}" />
            <p:inputText id="txtIDNumber" value="#{applicantBean.personal.idNumber}"  >
                <p:ajax event="change" process="@this" update="tvQuickScore"/>
            </p:inputText>
            <p:outputLabel value="#{resources['Name']}" />
            <p:inputText id="txtFirstname" value="#{applicantBean.personal.firstName}" />
            <p:outputLabel value="#{resources['Surname']}" />
            <p:inputText id="txtSurname" value="#{applicantBean.personal.lastName}" />
        </h:panelGrid>
    </p:panel>  
</h:panelGrid>
</p:panel>
user2462171
  • 11
  • 1
  • I have tried using the vertical-align: top style instruction and it does not seem to work even when I put it in every h:panelGrid that I am using. There is something buggy in JSF2 or CSS. – user1539401 Dec 08 '20 at 02:31