Primefaces PanelGrid colSpanエラー

Question

私は、素早く応答するように、素体でページの本体を分割しようとしています。問題は、私が示す列を尊重しないことです。私は似たようなことに起こった他の人たちを見ましたが、私のコードでは間違っていることは分かりません。

誰かが私を助けることができますか？

はPrimefaces manualで述べたように

<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を使用することはできません事前にどうもありがとうございましに関するROWSPANとCOLSPAN：

• 。なお、このアプローチはグリッドレイアウトをサポートしていません。
  1. セット列= "2"
  2. 削除P：行と列をまたがっ
  3. columnClassesの=を追加し、「UI-グリッド-COL

あなたは、あなたがすべきを望むものを達成するために

：-9、UI-グリッド-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％になります。
あなたは素数のショーケースについて確認できますResponsive DesignとGrid CSS

これが役に立ちます。

サイド質問：このパネルはh:formの中にありますか？はいの場合は、最初にp:columnの中にh:formを削除することができます。