Primefaces分隔符在panelgrid中显示为行元素

Question

如何有效地在primefaces中使用分隔符标签？

对于以下输出，分隔符显示为下一行中的元素之一。理想情况下，我想在单行中分隔符，然后显示其他输入元素。我附上了如何显示分隔符的屏幕截图，因为它显示在第二行的第5个元素。

任何帮助都非常值得赞赏。

JSF代码

<p:panelGrid columns="4" id="mypanel">
 <f:facet name="header">
      Projects
      </f:facet>

<p:outputLabel value="Project: ">
    <p:inputText required="true"
 readonly="true">
 </p:inputText>
</p:outputLabel>

<p:outputLabel value="Project Title: " >
<p:inputText readonly="true">
</p:inputText>
</p:outputLabel>

<p:outputLabel value="Is selected " >
<p:selectBooleanCheckbox value="" />
</p:outputLabel>

<p:outputLabel value="Is approved"  >
<p:selectBooleanCheckbox value="" />
</p:outputLabel>

<p:separator>

</p:separator>  
    ... other elements

Answer 1

首先，考虑使用for组件的<p:outputLabel>属性。你不应该在<p:inputText>内嵌套<p:outputLabel>。

接下来，您可以使用<p:row>和<p:column>来描述<p:panelGrid>内容的更复杂结构。

试试这个：

<p:panelGrid id="mypanel">
    <f:facet name="header">Projects</f:facet>
    <p:row>    
        <p:column>
            <p:outputLabel value="Project:" for="project">
            <p:inputText required="true" readonly="true" id="project"/>  
        </p:column>
        <p:column>
            <p:outputLabel value="Project Title:" for="title" />
            <p:inputText readonly="true" id="title"/>
        </p:column>
        <p:column>
            <p:outputLabel value="Is selected:" for="isSel"/>
            <p:selectBooleanCheckbox value="" id="isSel"/>
        </p:column>
        <p:column>
            <p:outputLabel value="Is approved:" for="isApp"/>
            <p:selectBooleanCheckbox value="" id="isApp"/>
        </p:column>
    </p:row>
    <p:row>
        <p:column colspan="4">  
            <p:separator />
        </p:column>  
    </p:row>
    <p:row>
        <!-- Other elements. -->
    </p:row>
</p:panelGrid>

您也可以看到Live demo。