100% Altezza in dGrid

Question

Come è possibile creare un'istanza dGrid che occupa il 100% dell'altezza del suo contenitore? Posso usare i CSS per rendere il ".dgrid" diviso in una specifica altezza ma quando lo imposto al 100% non viene visualizzato.

Answer 1

Capito.

.dgrid { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: auto; 
} 

(con posizione assoluta/relativa sul contenitore, ovviamente)

Answer 2

@ risposta di voidstate è buono. Un altro modo per farlo è come questo:

HTML:

<div class="containsDGrid"> 
    <div data-dojo-attach-point="dgrid"></div> 
</div> 

CSS:

.containsDGrid { 
    height: 500px; 
    width: 500px; 
} 

.dgrid { 
    height: 100%; 
    width: 100%; 
} 

La chiave è che se si imposta l'altezza della dgrid al 100%, padre del dgrid deve avere il suo alto set. Per esempio, se non abbiamo impostato l'altezza delle .containsDGrid div allora sarà simile a questa (si noti l'altezza del 2px):

Per un altro esempio vedere Dojo Dgrid - Use remaining space in block

Answer 3

Credo che il sostenuto il modo per farlo è con la classe css .dgrid-autoheight.

 require([ 
      "dgrid/List", 
      "dgrid/OnDemandGrid", 
      "dgrid/Selection", 
      "dgrid/Keyboard", 
      "dojo/_base/declare", 
      "dgrid/test/data/createAsyncStore", 
      "dgrid/test/data/smallColorData", 
      "dojo/domReady!" 
     ], function(List, Grid, Selection, Keyboard, declare, createAsyncStore, smallColorData){ 
       window.grid = new (declare([Grid, Selection, Keyboard]))({ 
        className: "dgrid-autoheight", 
        collection: createAsyncStore({ data: smallColorData }), 
        columns: { 
         col1: "Color", 
         col5: "R", 
         col6: "G", 
         col7: "B" 
        } 
       }, "grid"); 
      }); 

Questo è dallo test examples.