Question

我有一个代码用于对齐panelgrid中的组件，我在下面给出了这些代码

      <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%;
}

我的问题是，因为第三组和第四组只有一个<h:outputLabel>，第四组中的第一项跳转到第三行以填充panelgrid，因为它期望连续三个组件和第五项跳转到第3行以计算行。

我尝试的是在第三行中插入“DUMMY”以完成面板网格，当该行仅包含两个组件时，但是还有另一组行具有2或3,4个动态渲染的组件更难以对齐。

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

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

enter image description here

如何解决此问题？

Answer 1

您的列按照p:panelGrid（或上面的示例h:panelGrid）的默认行为进行布局，并带有一组编号列。网格中包含的每个组件将从左到右，从上到下排列。

如果您希望更好地控制使用p:row和p:column的内容，以帮助定义网格的结构。关于如何实现这一目标的一个很好的参考是在PanelGrid下的PrimeFaces展示中。

<h：panelgrid> </h：panelgrid>的设计问题

1 个答案: