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>