Primefaces PanelGrid erreur colSpan

Question

J'essaie de diviser le corps d'une page avec des primitives afin qu'il soit sensible. Le problème est qu'il ne respecte pas les colonnes que j'indique. J'ai vu d'autres personnes qui sont arrivées à des choses semblables, mais je ne peux pas trouver que c'est faux dans mon code.

Quelqu'un peut-il m'aider?

Merci beaucoup à l'avance

<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

Vous ne pouvez pas utiliser colspan dans un p:panelGrid avec layout="grid".
Comme indiqué dans Primefaces manual à propos rowspan et colspan:

• Notez que cette approche ne prend pas en charge la disposition de la grille.

Pour obtenir ce que vous voulez, vous devez:

1. colonnes set = "2"
2. supprimer p: rangée et colspan
3. ajouter columnClasses = "ui-grid-col -9, ui-grid-col-3"

Code Vous devez ressembler à ceci:

<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" entraînera 75% et 25% de largeur de vos colonnes.
Vous pouvez vérifier Primefaces vitrine sur les Responsive Design et Grid CSS

Hope this helps.

Question subsidiaire: est ce panelGrid à l'intérieur d'un h:form? Si oui, je pense que vous pouvez supprimer h:form à l'intérieur de votre premier p:column.