100% Height in dGrid

Question

How is it possible to make a dGrid instance take up 100% of the height of its container? I can use CSS to make the ".dgrid" classed div a specific height but when I set it to 100% it doesn't display.

score 12 · Accepted Answer · answered Jan 11 '13 at 11:17

12

Got it.

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

(With position absolute/relative on container, of course)

answered Jan 11 '13 at 11:17

voidstate

7,937
4
40
52

3

Some additional details: [_Dgrid Resizing within BorderContainer_](http://stackoverflow.com/questions/13427937/dgrid-resizing-within-bordercontainer/13436318#13436318) ;) – phusick Jan 13 '13 at 07:46

score 5 · Answer 2 · answered Nov 02 '16 at 00:10

I think the supported way to do this is with the .dgrid-autoheight css class.

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

This is from the test examples.

dgrid-auroheight resize grid to content not to container – Dunaevsky Maxim Sep 25 '17 at 17:41 — Dunaevsky Maxim, Sep 25 '17 at 17:41

score 1 · Answer 3 · edited May 23 '17 at 12:01

@voidstate's answer is good. Another way to do it is like this:

HTML:

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

CSS:

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

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

The key is that if you set the height of the dgrid to 100%, the dgrid's parent must have its hight set. For example if we don't set the height of the .containsDGrid div then it will look like this (notice the height of 2px):

enter image description here

For another example see Dojo Dgrid - Use remaining space in block

100% Height in dGrid

3 Answers3