h:panelGrid renders empty table cells

I have the following <h:panelGrid>:

   <h:panelGrid columns="2" id="panelGrid" > 
        <!-- heading -->
        <f:facet name="header">
            User Details
        </f:facet>

        <h:outputLabel value="#{bundle.ViewUserdetailsLabel_id}"/>
        <!-- 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:outputText value="#{bundle.ViewUserdetailsLabel_username}"/>
        <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" />

        <f:facet name="footer"></f:facet>  

    </h:panelGrid>

I expected it to show up as

User Details
Id:          500
Username:    zzzzzzzz

However, instead it show up with some empty cells:

User Details
             Id:
             500
             Username:
zzzzzzzz

The same problem perists when I use <p:panelGrid> instead of <h:panelGrid>. How is this caused and how can I sovle it?

Answers


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>

Need Your Help

PHP foreach loop to build multi array

php arrays loops multidimensional-array foreach

I'm trying to build a multi array with this structure:

quickselect code in matlab

matlab tail-recursion

Let us consider following pseudo code

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.