web-dev-qa-db-ja.com

グリッド全体のag-grid自動高さ

すべての行に完全に収まるようにグリッドのサイズを調整する良い方法が見つかりません。

ドキュメント ％またはpxによるサイジングのみを指します。

行に基づいてサイズを調整したいので、次の関数を思いつきました。車輪を再発明しているように思えるので、おそらくもっと良い方法がありますか？

getHeight(type:EntityType) {
    var c = this.Apis[type] && this.Apis[type].api && this.Apis[type].api.rowModel // get api for current grid
        ? this.Apis[type].api.rowModel.rowsToDisplay.length
        : -1;
    return c > 0
        ? (40+(c*21))+'px' // not perfect but close formula for grid height
        : '86%';
}

厄介な方法が必要です。

ag-grid
12
Sonic Soul

私はこのソリューションに出会いました：

この問題には2つの答えがあります。

1）v10.1.0より前のバージョンを使用している場合は、次のCSSを使用して問題を解決できます。

.ag-scrolls {
    height: auto !important;
}

.ag-body {
    position: relative !important;
    top: auto !important;
    height: auto !important;
}

.ag-header { 
    position: relative !important;
}

.ag-floating-top {
    position: relative !important;
    top: auto !important;
}

.ag-floating-bottom {
    position: relative !important;
    top: auto !important;
}

.ag-bl-normal-east,
.ag-bl-normal,
.ag-bl-normal-center,
.ag-bl-normal-center-row,
.ag-bl-full-height,
.ag-bl-full-height-center,
.ag-pinned-left-cols-viewport,
.ag-pinned-right-cols-viewport,
.ag-body-viewport-wrapper,
.ag-body-viewport {
    height: auto !important;
}

2）v10.1.0より上には、「domLayout」というプロパティがあります。

6
Kennyb

自動幅と自動高さのonGridReady関数に次のコードを追加します

onGridReady = params => {
   // Following line to make the currently visible columns fit the screen  
   params.api.sizeColumnsToFit();

   // Following line dymanic set height to row on content
   params.api.resetRowHeights();
};

参照 自動高さ自動幅

0
ranjit redekar