Question

您好我遇到Panelgrid问题。它没有正确呈现。下面的代码应该呈现两列：

 <p:panelGrid id="pnl" columns="3"  >
    <p:row>
        <p:column>
            <h:outputText value="Types" />
                <p:selectOneMenu  id="tipifase" value="#{home.t}" 
                            >
                                    <f:selectItems value="#{home.types}" />
                </p:selectOneMenu>
        </p:column>
    <p:column>
        <h:outputText value="Step 1"   /> <h:inputText value="#{faseAperta.step1}" />
        <f:verbatim><br /></f:verbatim>
        <h:commandLink  action="#{home.search}" > 
                <h:graphicImage value="images/icosearch.gif" style="{border: 0}" />
                    <h:outputText value="ID field" />
         </h:commandLink>
        </p:column>
        <p:column></p:column>
    </p:row>
    </p:panelGrid>

不幸的是

<h:commandLink  action="#{home.search}" > 
                    <h:graphicImage value="images/icosearch.gif" style="{border: 0}" />
                        <h:outputText value="ID field" />
             </h:commandLink>

在第一列下的新行上呈现。我希望有替代的是三列。我的代码有什么问题吗？

Answer 1

<f:verbatim><br /></f:verbatim>标记位于第三列，这就是命令链接放在第一列中的原因。

如果你删除它，它就会起作用。

Answer 2

正如另一个答案所述，<f:verbatim><br /></f:verbatim>取代了第三列。如果要将组件“垂直堆叠”，则可以始终使用h:panelGrid。

<p:column>
  <h:panelGrid columns="1">
    <h:outputText value="Step 1"   /> <h:inputText value="#{faseAperta.step1}" />
    <h:commandLink  action="#{home.search}" > 
      <h:graphicImage value="images/icosearch.gif" style="{border: 0}" />
        <h:outputText value="ID field" />
    </h:commandLink>
  </h:panelGrid>
</p:column>

Primefaces Panelgrid未正确呈现

2 个答案: