Primefaces PanelGrid colSpan錯誤

Question

我想用primefaces分割頁面的主體，以便它能夠響應。問題是它不尊重我指出的列。我見過其他碰巧遇到過類似事情的人，但我無法發現它在我的代碼中是錯誤的。

任何人都可以幫助我嗎？

非常感謝你提前

<p:panelGrid columns="4" layout="grid" style="width:100%;"> 
      <p:row> 
       <p:column colspan="3"> 
        <h:form> 
         cosas muy randomosas que tiene que usar el 75% 
        </h:form> 
       </p:column> 
       <p:column colspan="1"> 
        <p:panelGrid columns="2"> 
         <h:outputLabel for="username" value="Username:" /> 
         <p:inputText id="username" value="#{userLogin.username}" 
          required="true" label="username" /> 
         <h:outputLabel for="password" value="Password:" /> 
         <p:password id="password" value="#{userLogin.password}" 
          required="true" label="password" /> 

         <f:facet name="footer"> 
          <p:commandButton value="Login" actionListener="#{userLogin.login}" /> 
         </f:facet> 
        </p:panelGrid> 
       </p:column> 
      </p:row> 
     </p:panelGrid> 

Answer 1

在p:panelGrid與layout="grid".
不能使用colspan作爲Primefaces manual表示有關行跨度和colspan屬性：

• 注意這種方法不支持網格佈局。

達到你想要什麼，你應該：

1. 組列= 「2」
2. 除去對：行和列跨度
3. 添加columnClasses =「UI網-COL -9，ui-grid-col-3「

您的代碼應該看起來像這樣：

<p:panelGrid columns="2" layout="grid" columnClasses="ui-grid-col-9,ui-grid-col-3"> 
    <p:column> 
     <cosas muy randomosas que tiene que usar el 75% 
    </p:column> 
    <p:column> 
     <p:panelGrid columns="2"> 
      <h:outputLabel for="username" value="Username:" /> 
      <p:inputText id="username" value="#{userLogin.username}" 
       required="true" label="username" /> 
      <h:outputLabel for="password" value="Password:" /> 
      <p:password id="password" value="#{userLogin.password}" 
       required="true" label="password" /> 

      <f:facet name="footer"> 
       <p:commandButton value="Login" 
        actionListener="#{userLogin.login}" /> 
      </f:facet> 
     </p:panelGrid> 
    </p:column> 
</p:panelGrid> 

columnClasses="ui-grid-col-9,ui-grid-col-3"將使您的列具有75％和25％的寬度。
您可以檢查Primefaces展示約Responsive Design和Grid CSS

希望這會有所幫助。

旁邊的問題：這個panelGrid在h:form裏面嗎？如果是的話，我認爲你可以在你的第一個p:column內刪除h:form。