dojo - dGrid の 100% の高さ

Question

dGrid インスタンスがコンテナの高さの 100% を占めるようにするにはどうすればよいですか? CSS を使用して「.dgrid」クラスの div を特定の高さにすることができますが、100% に設定すると表示されません。

Answer 1

とった。

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

（もちろん、コンテナの絶対/相対位置で）

Answer 2

これを行うためにサポートされている方法は、 .dgrid-autoheight css クラスを使用することだと思います。

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

これはテスト例からのものです。

Answer 3

@voidstateの答えは良いです。それを行う別の方法は次のとおりです。

HTML:

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

CSS:

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

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

重要なのは、dgrid の高さを 100% に設定する場合、dgrid の親にその高さを設定する必要があるということです。たとえば、.containsDGriddiv の高さを設定しない場合、次のようになります (高さが 2px であることに注意してください)。

別の例については、Dojo Dgrid - ブロック内の残りのスペースを使用するを参照してください。