与<h:panelGrid>

Question

设计问题，我有对准我已经低于

 <h:panelGrid columns="2" styleClass="table width100P" 
         columnClasses="width50P, width50P"> 
         <h:panelGrid columns="3" 
          columnClasses="leftColb, rightColb,rightColb" 
          styleClass="infoTable"> 
     // FIRST set of items which will be displayed in the first row since the panel grid column is "3". 
      <h:outputLabel value="PAT # :" /> 
      <h:outputLabel value="PAT # :" /> 
//THE BELOW IS AN DUMMY LABEL TO FULFILL THE PANEL GRID 
       <h:outputLabel value="PAT # :" /> 



     // SECOND set of items which will be displayed in the SECONDE row since the panel grid column is "3". 
      <h:outputLabel value="PAT # :" /> 
      <h:outputLabel value="PAT # :" /> 
      //THE BELOW IS AN DUMMY LABEL TO FULFILL THE PANEL GRID 
       <h:outputLabel value="PAT # :" /> 



     //THIRD SET OF items which will be displayed in the THIRD row since the panel grid column is "3". 
      <h:outputLabel value="PAT # :" /> 


    //FOURTH SET OF items which will be displayed in the FouRHT row since the panel grid column is "3". 
      <h:outputLabel value="PAT # :" /> 


     </h:panelGrid> 
     </h:panelGrid> 

CSS For the leftColb, rightColb,rightColb,width100P given below 

.infoTable TD { 
     padding: 1px 2px; 
     border-width: 1px 0px 1px 0px; 
     border-color: #ddd; 
     border-style: solid; 
     vertical-align: top; 
    } 

    .leftColb { 
     text-align: right; 
     font-weight: bold; 
     width: 50%; 
    } 

    .rightColb { 
     text-align: left; 
     font-weight: normal; 
     width: 50%; 
    } 

.width50P { 
    width: 50%; 
} 

.width100P { 
    width: 100%; 
} 

我的问题是给定的panelGrid中内部组件的代码自第三集和since以来rth set只有一个<h:outputLabel>，第四组中的第一项跳到第三行以填充panelgrid，因为它预期连续排列三个组件，第五个项目跳转到第三排以统计行。

我试过的是在第三行插入一个“DUMMY”以满足面板网格，当该行只包含两个组件时，但是还有另外一组行具有动态呈现的2或3个组件这使得排列更加困难。

由于面板网格允许连续排列三个项目。我试图平衡每一行中的组件。尽管其余的行组件是动态生成的。

下面给出的屏幕截图的PFA。

我怎样才能解决这个问题？

Answer 1

您的列正在按照缺省行为p:panelGrid（或在上面的示例中为h:panelGrid）与一组编号列进行布局。包含在网格中的每个组件将从左到右，从上到下进行布局。

如果您想更多地控制使用哪些地方p:row和p:column来帮助定义网格的结构。关于如何完成的一个很好的参考是在PanelGrid下的PrimeFaces Showcase中。