Aligning contents of PrimeFaces' PanelGrid

If you are trying to align the contents of a panelGrid and nothing seems to work (styles that you define eventually don't appear in the rendered page) then this might help you.

This post covers a very specific case of alignment not working, and it depends on the following:

• You are using the columns property in your panelGrid;
• You are trying to define rows and columns manually, with <p:row> and <p:column>, because you probably want to use colspan or rowspan

Well, you probably checked the ShowCase of PrimeFaces to learn about PanelGrid. However, it is not clear in their example (neither in their Documentation) that when manually defining rows and columns, the total number of columns in the panelGrid should not be defined, i.e, the columns property should not exist. Their example is correct but doesn't make it clear that it should be exactly like that.

In conclusion, you cannot use the panelGrid like the following:

<p:panelGrid columns="2">
    <p:row>
        <p:column>
            <h:outputText value="Hello"></h:outputText>
        </p:column>
        <p:column>
            <h:outputText value="World"></h:outputText>
        </p:column>
    </p:row>
</p:panelGrid>

Useful links:

• Aligning content inside panelGrid columns
• Primefaces ShowCase: PanelGrid