Come montare un datatable in un pannello con altezza massima percentuale

[Primefaces 5.0]Come montare un datatable in un pannello con altezza massima percentuale

Ho un tabview che contiene un datatable. A seconda della scheda, il datatable viene riempito con dati diversi (cioè un diverso numero di colonne e righe). La seguente configurazione gestisce bene i dati, ma non importa se inserisco il vincolo di altezza massima sul pannello, sulla scheda o sul datatable, non sembra vincolare a quella percentuale dello schermo. Se imposto il vincolo su un valore particolare (ad esempio 300px), funziona, ma preferirei di no.

Fondamentalmente: Voglio un datatable che si adatti al suo contenuto fino al punto che occupa il 30% dello schermo. A questo punto, dovrebbe scorrere.

<body style="min-width: 1366px;min-height: 768px;height: 100%;margin-left: 20px;"> 
    <div style="width: 10%;float: left"> ... </div> 
    <div style="width: 90%;float: right"> 
      <p:panel classStyle="panel" header="Instance Data View" style="width: 100%;max-height: 30%;margin-bottom: 1%"> 
       <p:tabView value="#{pageBean.tables}" var="table" dynamic="true"> 
        <p:tab title="#{table.tableName}" > 
         <p:dataTable var="row" 
          value="#{pageBean.tableData[table.tableName].data}" 
          resizableColumns="true"> 
          <p:columns value="#{pageBean.tableData[table.tableName].columns}" style="white-space: normal;" 
           var="column" columnIndexVar="columnIndex"> 
           <f:facet name="header"> 
            <p:outputLabel value="#{column}"/> 
           </f:facet> 
           <p:outputLabel value="#{row[columnIndex]}"/> 
          </p:columns> 
         </p:dataTable> 
        </p:tab> 
       </p:tabView> 
      </p:panel> 
      ... 
    </div> 
    </body>

fonte

2014-06-23 user2303325

si usano cas ScrollWidth e ScrollHeight per DataTable. Ci sono tre opzioni per questo scopo. ad esempio:

scrollHeight="30%" 
scrollWidth="30%" 
scrollable="true"

con questo metodo è possibile controllare le dimensioni del datatable.

p.s: non si dice la versione per primefaces.

fonte

2014-06-23 07:18:50

Il problema di questa soluzione è che io voglio DataTable per essere contenuta ad una determinata percentuale del schermo - un massimo del 30% di esso. Tuttavia, l'utilizzo del vincolo scrollHeight come questo giorno lo limita a una percentuale del * data *. Dal momento che il numero di righe che avrò non è impostato su pietra, questo non risolve il mio problema. Ho aggiunto una descrizione migliore nella mia domanda. – user2303325

È possibile utilizzare "vh" delle dimensioni di max-height, per l'altezza finestra come questa:

<body style="min-width: 1366px;min-height: 768px;height: 100%;margin-left: 20px;"> 
<div style="width: 10%;float: left"> ... </div> 
<div style="width: 90%;float: right"> 
     <p:panel classStyle="panel" header="Instance Data View" style="width: 100%;margin-bottom: 1%"> 
      <p:tabView value="#{pageBean.tables}" var="table" dynamic="true"> 
       <p:tab title="#{table.tableName}" > 
        <p:dataTable var="row" 
         value="#{pageBean.tableData[table.tableName].data}" 
         resizableColumns="true" style="max-height: 30vh;"> 
         <p:columns value="#{pageBean.tableData[table.tableName].columns}" style="white-space: normal;" 
          var="column" columnIndexVar="columnIndex"> 
          <f:facet name="header"> 
           <p:outputLabel value="#{column}"/> 
          </f:facet> 
          <p:outputLabel value="#{row[columnIndex]}"/> 
         </p:columns> 
        </p:dataTable> 
       </p:tab> 
      </p:tabView> 
     </p:panel> 
     ... 
</div> 
</body>

fonte

2017-05-29 13:37:29

Come montare un datatable in un pannello con altezza massima percentuale

risposta

Problemi correlati