Jsf Panelgrid Alignment to Top

Aligning content inside panelGrid columns

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

<h:panelGrid columnClasses="className">

.className {
    vertical-align: top;
}

Align a PanelGrid which is in another PanelGrid

first add this :

    <h:head>
        <style>
    .className td {
        vertical-align: top;
    }
    </style>
</head>

and

<h:panelGrid columns="2" id="container" styleClass="className"
        style="display:block;">

and clean tomcat work directory, clean the browser cache and it working like a charme !!!!

Align nested h:panelGrid in center

I don't think you are going about centering a panelGrid the right way. This has been discussed in several other questions on this site. panelGrid renders to a , a block level element. text-lign: center will just center the text in it. You should use margin: 0 auto to adjust the margins.

Look at these answers to help:

How to align PanelGrid to center? JSF-Primefaces

Center a div in CSS - Bad questions, good answer

Edit:
I made a quick project with your page and was able to center all 3 panelGrids:

The code for it is below, (I added 10px top margins instead of 0 to more easily tell the panels apart):

    <h:panelGrid id="A" border="1" columns="1" style="margin: 10px auto; width: 100%; ">                            
        <h:panelGrid id="B" border="1" columns="2" style="margin: 10px auto;  width: 460px">
            <h:panelGrid border="1" columns="1" style="margin: 10px auto;">
                <h:inputText style="width: 310px; " ></h:inputText>                             
            </h:panelGrid>
            <h:commandButton value="Add"></h:commandButton>
        </h:panelGrid>
    </h:panelGrid>

How to align contents of p:panel vertical-align to center

<p:panel style="height:500px;position:relative;"/>
    <p:panelGrid columns="1" styleClass="centered">
        <div class="component-spacing-top"/>
        <h:graphicImage alt="#{business.businessName}" value="#{business.logoFullPath}"    class="small-panel-image" />
        <div class="component-spacing-top"/>
    </p:panelGrid>
</p:panel>

height value is randomly given it does not matter, but do not erase position:relative.

.centered {
position: absolute;
height: 100px;
top: 0;
bottom: 0;
margin:auto;
}

For horizontal you should add below rules:

left:50%;margin-left:-100px;width:200px;

Look out, margin-left value is the -1/2 times of width value.

Result:

If width is not fixed you can try this way it works on me and aligns it center horizontally and vertically at same time:

<p:panel style="line-height:200px;padding: 5% 0;position: relative;"/>
    <p:panelGrid columns="1" styleClass="centered">
        <div class="component-spacing-top"/>
        <h:graphicImage style="vertical-align:middle;" alt="#{business.businessName}" value="#{business.logoFullPath}"    class="small-panel-image" />
        <div class="component-spacing-top"/>
    </p:panelGrid>
</p:panel>

Note that graphicImage has style property as well.

.centered {
position:relative;
height: 100px;
margin:0 auto;
padding: 10% 0;
}

Result:

Even if doesn't work you should check the link that I gave inside about. That was what I am doing there are 6 ways and you should mix them.

• About
• Demo

How to control alignment of DataTable inside of a PanelGrid?

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:

• HTMLDog CSS tutorial
• CSSTutorial.net

How to align PanelGrid to center? JSF-Primefaces

The JSF <p:panelGrid> component renders a HTML <table> element which is by default a block level element. To center the block level element itself, you should set its horizontal margin to auto instead of attempting to center its inline contents.

.panelGridCenter {
    margin: 0 auto;
}

See also:

• Center a div in CSS

---

Related Topics