Aligning content inside panelGrid columns

Question

How do I align the content in the columns created by panelGrid component to the top ?

I tried with no success, the following code

<h:panelGrid columns="2" style="vertical-align:top;  " >
       <p:tabView style="margin:0px 0px 50px 0px; width: 450px; padding-top: 0px;vertical-align:top" ></p:tabView>                
       <p:menubar autoSubmenuDisplay="true" style="width: 300px; vertical-align:top" ></p:menubar>
</h:panelGrid>

But the 2 columns created hereby still remain vertically middle aligned.

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

24

Based on this answer, you can do like this (I like this approach the most)

<h:panelGrid columnClasses="className">

.className {
    vertical-align: top;
}

edited May 23 '17 at 12:23

Community

1
1

answered Jun 13 '11 at 05:40

Dejell

13,947
40
146
229

you'll need a column class for each column – jeff May 05 '15 at 14:57

score 16 · Answer 2 · answered Sep 21 '11 at 10:20

for me it works if you do it like that:

<h:panelGrid columns="6" cellspacing="4" cellpadding="4" styleClass="panelColumns">
</h:panelGrid>

and create a css file which contains:

.panelColumns td {
    vertical-align: top; 
}

just as additional hint .. so you do not have to search to long :)

Aligning content inside panelGrid columns

2 Answers2