CODEWITHSUNDEEP
cssdojodgrid
sixtyfootersdude
sixtyfootersdude

Reputation: 27241

Dojo Dgrid - Use remaining space in block

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 myDGrid block contains a Dojo DGrid. It should use the remainder of the space in container. For example:

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

What is the best way to do this?

Upvotes: 0

Views: 614

Answers (1)

sixtyfootersdude
sixtyfootersdude

Reputation: 27241

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

Upvotes: 0

Related Questions