Прокрутка прокрутки в пределах Angular UI ng-grid?

Мы хотели бы использовать Angular UI ng-grid, но не можем найти опцию, чтобы показать видовому экрану в сетке, чтобы не перевести переполнение в автоматический, а не прокручивать.

Мы хотели бы, чтобы высота таблицы/сетки была динамической, исходя из размера числа строк в нашей сетке. У нас есть фиксированное максимальное количество строк, поэтому мало беспокоится о том, что в DOM слишком много строк.

Любые предложения о том, куда идти?

Ответ 1

Недавно я столкнулся с теми же проблемами и нашел решение на 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"
   };
};

Ответ 2

Добавление этого в ваш CSS поможет решить вашу проблему:

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

Ответ 3

В вашем CSS вы можете попробовать переопределить height div, содержащий строки, поэтому строки не переполняют контейнер:

.ngViewport {
  height: auto !important;
}

Вы также можете заполнить пробел, который ng-сетка уходит на полосу прокрутки с цветом фона строки (хотя, к сожалению, последняя ячейка данных не будет расширяться, чтобы заполнить пробел):

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

В зависимости от раскладки таблицы вам может потребоваться изменить некоторые другие стили, но они являются основными. Также старайтесь не устанавливать высоту для всего ngGrid.

Ответ 4

Да есть плагин, который предлагает такой объект ng-grid-flexible-height.js

вы можете увидеть plunker, как его использовали