h:panelGrid renders empty table cells

jsf, panelgrid, primefaces

Solution

In a panel grid each immediate child component counts as a single table cell.

Those `<!-- heading -->` and `<!-- adding ... -->` comment lines count each as a single child. Those thus also counts each as a single table cell.

To solve it, just tell Facelets to skip all comments during view build time by the following `web.xml` entry:

<context-param>
    <param-name>javax.faces.FACELETS_SKIP_COMMENTS</param-name>
    <param-value>true</param-value>
</context-param>

Then there's the `<p:tooltip>` which also counts as a single table cell even though it does not represent any immediate content. You need to wrap the tooltip and its target component in a `<h:panelGroup>` so that it represents a single table cell (additionally, you could alternatively also just put the comment in there).

<h:outputLabel value="#{bundle.ViewUserdetailsLabel_id}"/>
<h:panelGroup>
    <!-- adding in a small effect here that will fade a message when a user hovers over the id number or username -->
    <h:outputLink id="id1" value="#">  
        <h:outputText id="id" value="#{userdetailsController.selected.id}" title="#{bundle.ViewUserdetailsTitle_id}"/> 
    </h:outputLink>                            
    <p:tooltip for="id" value="This is your I.D. Number" showEffect="fade" hideEffect="fade" />
</h:panelGroup>

<h:outputText value="#{bundle.ViewUserdetailsLabel_username}"/>
<h:panelGroup>
    <h:outputLink id="username1" value="#">  
        <h:outputText id="username" value="#{userdetailsController.selected.username}" title="#{bundle.ViewUserdetailsTitle_username}"/>
    </h:outputLink>                            
    <p:tooltip for="username" value="Your registered username, this can be changed" showEffect="fade" hideEffect="fade" />
</h:panelGroup>

Problem

Original source