web-dev-qa-db-ja.com

Angular UI ng-grid？内のスクロールをオフにします。

Angular UI ng-gridを使用したいのですが、オーバーフローを自動に設定せず、スクロールしないようにグリッド内のビューポートに指示するオプションが見つからないようです。

私たちがやりたいのは、グリッドの行数のサイズに基づいてテーブル/グリッドの高さを動的にすることです。最大行数は固定されているため、DOMに行が多すぎる心配はほとんどありません。

どこに行くべきかについての提案はありますか？

angularjsangular-uing-grid
12
RullDawg

私は最近同じ問題に遭遇し、 https://groups.google.com/forum/#!topic/angular/KiBXP3eKCDY で解決策を見つけました

あなたが欲しいng-gridデータを取得した後に初期化します。

次のソリューションでは、angular-uiを使用する必要があります。

<div ui-if="dataForGrid.length>0" ng-grid="gridOptions" ng-style="getTableStyle()"  />

$scope.getTableStyle= function() {
   var rowHeight=30;
   var headerHeight=45;
   return {
      height: ($scope.dataForGrid.length * rowHeight + headerHeight) + "px"
   };
};
8
Dharmesh

これをCSSに追加すると、問題が修正されます。

.ngViewport{
    height:auto !important;
}
.ngCanvas, .ngViewport, .ngRow, .ngFooterPanel, .ngTopPanel   {
   width: 100% !important;
}
.ngRow {
   border-bottom:none !important;
}
10
suf

CSSで、行を含むheightのdivをオーバーライドして、行がコンテナーをオーバーフローしないようにすることができます。

.ngViewport {
  height: auto !important;
}

Ng-gridがスクロールバー用に残した空白を行の背景色で埋めることもできます（ただし、残念ながら、データの最後のセルはギャップを埋めるために拡張されません）。

.ngCanvas {
   width: 100% !important;
}
.ngRow {
   width: 100% !important;
}

テーブルのレイアウトによっては、他のスタイルも変更する必要があるかもしれませんが、これらが主なものです。また、ngGrid全体の高さを設定しないように注意してください。

6
jason_ruz

はい、そのような機能を提供するプラグインがあります ng-grid-flexible-height.js

plunker の使用方法を確認できます

5
Vinod Louis