Dojo Dgrid - Use remaining space in 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>

The DGrid is started like this:

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

Requirements:

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

The myDGrid block contains a Dojo DGrid. It should use the remainder of the space in container. For example:

• If container is 400px and someStuff is 200px then myDGrid should be 200px.
• If container is 300px and someStuff is someStuff is 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?

Tactile

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 like this:

.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;
}

Tactile

For anyone else looking at this - I am presently having issues in IE 8/9/10, using this code. – Tactile