Question

I’m trying to nest a table inside a h:panelGrid component, and h:selectOneMenu is screwing-up the formatting by closing off the cell it appears within and creating a new (and unwanted) row.

My code looks something like this:

<h:panelGrid columns="2">
    [Other rows that work just fine]
    <h:outputText value="Match [Stuff] to [More Stuff]:" />
    <table>
        <tr>
            <th>[Stuff]</th>
            <th>[More Stuff]</th>
        </tr>
        <tr>
            <td>
                <h:outputText value="Manually Created First Element of Stuff" />
            </td>
            <td>
                <h:selectOneMenu value="#{bean.moreStuffSetting}">
                    <f:selectItem itemLabel="--None--" itemValue="" />
                    <f:selectItem itemLabel="Manual First Choice" itemValue="manual" />
                    <f:selectItems
                        value="#{bean.listOfMoreStuff}"
                        var="moreStuff"
                        itemLabel="#{moreStuff.name}" 
                        itemValue="#{moreStuff.value}" />
                </h:selectOneMenu>
            </td>
        </tr>
        <ui:repeat value="#{bean.listOfStuff}" var="stuff">
            <tr>
                <td>
                    <h:outputText value="#{stuff.name}" />
                </td>
                <td>
                    <h:selectOneMenu value="#{bean.moreStuffSetting}">
                        <f:selectItem itemLabel="--None--" itemValue="" />
                        <f:selectItem itemLabel="Manual First Choice" itemValue="manual" />
                        <f:selectItems
                            value="#{bean.listOfMoreStuff}"
                            var="moreStuff"
                            itemLabel="#{moreStuff.name}" 
                            itemValue="#{moreStuff.value}" />
                    </h:selectOneMenu>
                </td>
            </tr>    
        </ui:repeat>
    </table>
</h:panelGrid>

The problem occurs with that first h:selectOneMenu element. (The h:selectOneMenu element inside ui:repeat is doing exactly what I expect it to, however.) I’m expecting “Manually Created First Element of Stuff” and that drop-down to appear as two cells in the same row. However, this is what’s showing up in the generated HTML:

<tr>
<td>Manually Created First Element of Stuff</td>
<td>
                            </td>
                            <td></td>
</tr>
<tr>
<td><select...

Two rows. However, in the nested one below, I get this:

                    <tr>
                        <td>[Label I'm expecting]
                            </td>
                            <td><select...

… which is exactly how I expected it to behave.

What am I doing wrong? Am I misusing JSF somehow? Is there some face-palm-worthy typo in there I’m not seeing?

Answer 1

The <h:panelGrid> picks the first sibling in the JSF component tree to start a new table cell. The plain HTML <table> element which you’ve there isn’t a JSF component.

Wrap it in a <h:panelGroup>.

<h:panelGrid columns="2">
    <h:outputText value="Match [Stuff] to [More Stuff]:" />
    <h:panelGroup>
        <table>
            ...
        </table>
    </h:panelGroup>
</h:panelGrid>

An alternative is to just use <h:dataTable> instead.