Question

I am trying to align two list in a panelGrid
Since one list is shorter than the other one I will have space between the panel and the shorter list top.

I just want to align with no space between the panel top and both of them will have the same width (50% , 50%)

 <h:panelGrid columns="2" >
    <p:dataList value="#{disBean.productList}" var="prod" itemType="circle"> 
        <f:facet name="header">p</f:facet>
        <p:column>#{prod.name} </p:column>
        <p:column>#{prod.Version}</p:column>
    </p:dataList>
    <p:dataList value="#{disBean.custList}" var="cust" itemType="circle"> 
        <f:facet name="header">c</f:facet>
        <p:column>#{cust.name} </p:column>
        <p:column>#{cust.Version}</p:column>
    </p:dataList>   
</h:panelGrid>

I try to use css (not in this example) but I didn’t find the correct combination.

Any example will be great

Thanks

Answer 1

You need to set the CSS vertical-align property to top on the <td> element generated by the <h:panelGrid>. You can set it via the columnClasses attribute which takes a comma separated string with CSS style class names which should be applied on every <td> element in sequence.

So, this should do,

<h:panelGrid ... columnClasses="align-top, align-top">

with this CSS

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