h:panelGrid 单元格分配不一致答案

【问题标题】：h:panelGrid inconsistent allocation of cellsh:panelGrid 单元格分配不一致
【发布时间】：2017-02-01 13:55:36
【问题描述】：

我的页面：---

某些原因导致 panelGrid 在多行中创建了一个空单元格。

我想要一个可见的两列表格，第一列是标签，第二列是 inputText 元素或带有工具提示的 selectMenu。

我的解决方法是这样，创建一个 3 列的表，当 panelGrid 决定不创建空单元格时，添加一个 <br></br> 来提示它这样做。

            <h:panelGrid columns="3" style="text-align:left">
                <p:remoteCommand name="startJobActivate" actionListener="#{provisioningBean.startJobActivate}" />

                <h:outputLabel for="longitudeIdAct" value="Longitude: " />
                <p:inputText id="longitudeIdAct" value="#{provisioningBean.longitude}" title="Longitude" />
                <p:watermark for="longitudeIdAct" value="Longitude" />

                <h:outputLabel id="equipmentDropMenuActLabel" for="equipmentDropMenuAct" value="#{provisioningBean.accessDeviceLabel}" />
                <p:selectOneMenu id="equipmentDropMenuAct" value="#{provisioningBean.equipment}" title="Not needed for CSI or SIP"
                    disabled="#{provisioningBean.equipDisabled}" style="width: 100% !important">
                    <f:selectItem itemLabel=" Equipment" itemValue="" noSelectionOption="true" />
                    <f:selectItems value="#{provisioningBean.equipments}" />
                </p:selectOneMenu>
                <p:tooltip for="equipmentDropMenuAct" />

                <h:outputLabel for="rangeActId" value="Range: " />
                <p:spinner id="rangeActId" value="#{provisioningBean.rangeAct}" min="1" title="Amount of telephone numbers to provide" size="3"
                    disabled="#{provisioningBean.rangeDisabled}" />
                <br></br>
            </h:panelGrid>

这是一个错误吗？我在这里错过了什么？

编辑：哦整洁！我设法创建了一个最小的例子，它仍然有同样的问题：D https://gist.github.com/WurmD/f3cb45669e6871acc77462f34891862f

screenshot - you need 10 rep to post images

所以这是一个 3 列的 h:panelGrid，但第三个单元格被某些东西占用了

EDIT2：与 p:panelGrid 的行为相同

【问题讨论】：

你能上传一张它的样子吗？如果你使用 p:panelGrid 会怎样？您能用硬编码文本创建一个更简单的示例，以便我们更轻松地对其进行测试吗？
@JaqenH'ghar：完成:)
3 列表示在每个第三个元素之后开始一个新行...将不相关的东西移到 panelgrid 之外，或者使用 h:panelgroup 对东西进行分组并将 panelgroup 计为 1 个元素

标签： jsf panelgrid

【解决方案1】：

感谢 Kukeltje 的回答：

h:panelGrid columns="3" 表示“在每个第三个元素之后开始新行”

因此，要么将水印（和其他不可见元素）放在 h:panelGrid 之外，要么使用 h:panelGroup 对应该只占据表格中一个单元格的内容进行分组：

<p:remoteCommand name="startJobActivate" actionListener="#{provisioningBean.startJobActivate}" />
<p:panelGrid columns="2" style="text-align:left">
    <h:outputLabel for="orderIdAct" value="Order Number: *" />
    <p:inputText id="orderIdAct" value="#{provisioningBean.orderNumberAct}" label="orderId" title="Order Number" />

    <h:outputLabel for="customerNameIdAct" value="Customer: *" />
    <h:panelGroup>
        <!-- h:panelGroup to group things that should only occupy 1 cell in the table -->
        <p:inputText id="customerNameIdAct" value="#{provisioningBean.customerName}" title="Customer Name" />
        <p:watermark for="customerNameIdAct" value="Customer Name" id="watermarkcustomerNameIdAct" />
    </h:panelGroup>

</p:panelGrid>
<p:panel id="executePanelAct">
    <p:commandButton value="Execute Activation" id="actvateButton" update=":form:growl" styleClass="executeButton" />
</p:panel>
<!-- Items that don't need to be in panelGrid -->
<p:watermark for="orderIdAct" value="Order Number" id="watermarkorderIdAct" />

【讨论】：