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

jsf primefaces

420 观看

2回复

0 作者的声誉

我有一个带有两列的panelGrid-每一个都有一个面板。两个面板都有dataTables并排放置。

<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,两个面板始终都位于顶部?

作者: user8586031 的来源 发布者: 2017 年 9 月 15 日

回应 2


0

29723 作者的声誉

尝试:

<style type="text/css">
     .my-style td{
        vertical-align: text-top !important;
      }
</style>

<h:panelGrid id="png31" columns="2" columnClasses="width: 40%, width: 60%"
             styleClass="my-style" >
      <p:panel> 
             ........
      </p:panel>
      .......
      .......
      .......
</h:panelGrid>
作者: krokodilko 发布者: 2017 年 9 月 15 日

0

10047 作者的声誉

添加CSS类:

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

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

并改变

<h:panelGrid id="png31" columns="2" columnClasses="col1, col2">
作者: Alex 发布者: 2017 年 9 月 15 日
32x32