如何在我的JSF应用程序中将面板的位置移到顶部？

Question

我有一个带有两列的panelGrid - 每一列都有一个面板。两个面板都有数据表并且是并排的。

<h:panelGrid id="png31" columns="2">
<p:panel id="pnlCab" header="Cabecera">
    <p:commandButton value="Nueva actividad" type="button" id="actiNue" onclick="PF('wdlgAgregar').show()"/>
    <br /> <br />
    <p:dataTable id="dataCabecera" value="#{cargaHorariaController.listaActivDoc}">
        <!-- Elements -->
    </p:dataTable>
</p:panel>

<p:panel id="pnlDet" header="Detalle">
    <p:commandButton value="Nueva subactividad" type="button" id="subactiNue" onclick="PF('wdlgAgregarS').show()">
        <p:ajax update="cmbSubNue" listener="#{cargaHorariaController.cargarSubactividades()}" />
    </p:commandButton>
    <br /> <br />
    <p:dataTable id="dataDetalle" value="#{cargaHorariaController.listaSubactividad}">
        <!-- Elements -->
    </p:dataTable>
</p:panel>

当数据表为空时，两个面板都位于顶部，但当其中一个显示记录时，具有空dataTable的面板将垂直对齐面板中间并填充dataTable。

我能做什么才能使两个面板始终位于顶部，即使填充了dataTables？

Answer 1

尝试：

fopen

Answer 2

添加CSS类：

.col1 {
width: 40%;
vertical-align: top;
}

.col2 {
width: 60%;
vertical-align: top;
}

并更改

<h:panelGrid id="png31" columns="2" columnClasses="col1, col2">