h:panelGrid 单元分配不一致
h:panelGrid inconsistent allocation of cells
我的页面:---
某些原因导致 panelGrid 在多行中创建一个空单元格。
我想要一个可见的两列 table,第一列是标签,第二列是 inputText 元素或带有工具提示的 selectMenu。
我的解决方法是,创建一个 3 列 table,当 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
相同的行为
感谢 Kukeltje 的回答:
h:panelGrid columns="3" 表示 "start new row after each third element"
因此,要么将水印(和其他不可见元素)放在 h:panelGrid 之外,要么使用 h:panelGroup 将只应占据 table 中一个单元格的内容分组:
<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" />
我的页面:---
某些原因导致 panelGrid 在多行中创建一个空单元格。
我想要一个可见的两列 table,第一列是标签,第二列是 inputText 元素或带有工具提示的 selectMenu。
我的解决方法是,创建一个 3 列 table,当 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
相同的行为感谢 Kukeltje 的回答:
h:panelGrid columns="3" 表示 "start new row after each third element"
因此,要么将水印(和其他不可见元素)放在 h:panelGrid 之外,要么使用 h:panelGroup 将只应占据 table 中一个单元格的内容分组:
<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" />