Dojo Dgrid - use the remaining space in the block

Question

I have a block like this:

<div class="container"> <div class="someStuff">Some stuff of unknown height</div> <div class="myDGrid" data-dojo-attach-point="dgrid"></div> </div> 

DGrid starts as follows:

 new (declare([OnDemandGrid, DijitRegistry]))({ store: ..., columns: ... }, this.dgrid); 

Requirements:

• The container block has some height.
• The someStuff block has some height, which is dynamically set.

The myDGrid block contains the Dojo DGrid. It should use the rest of the space in the container. For instance:

• If the container is 400px and someStuff is 200px, then myDGrid should be 200px.
• If the container is 300px and someStuff is someStuff, then 10px, then myDGrid should be 290px.

The dgrid should have scrollbars if all rows cannot be shown.

What is the best way to do this?

Answer 1

One solution is to change the html to this:

 <div class="container"> <div class="someStuff">Some stuff of unknown height</div> <div class="containsDGrid"> <div class="myDGrid" data-dojo-attach-point="dgrid"></div> </div> </div> 

And then use CSS as follows:

 .container { display: table; } .someStuff { display: table-row; } .containsDGrid { display: table-row; height: 100%; } .dgrid { width: 100%; height: 100%; } .dgrid .dgrid-scroller { overflow-y: auto; overflow-x: hidden; }