Angular UI ng-grid中的Turnoff Scrolling？

Question

我们想使用Angular UI ng-grid,但似乎找不到一个选项来告诉网格中的视口不要将溢出设置为auto而不是滚动.

我们想要做的是根据网格中行数的大小使表/网格高度动态化.我们有一个固定的最大行数,因此几乎不用担心DOM中有太多行.

关于去哪里的任何建议？

Answer 1

将此添加到您的CSS将解决您的问题:

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

Answer 2

我最近遇到了同样的问题,并在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"
   };
};

Answer 3

在你的CSS,你可以尝试重写height的div含行,所以行不溢出容器:

.ngViewport {
  height: auto !important;
}

您还可以使用行背景颜色填充ng-grid为滚动条留下的空白区域(尽管遗憾的是数据最后一个单元格不会扩展以填补空白):

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

根据您的表格布局,您可能还需要更改其他一些样式,但这些是主要的样式.还要注意不要为整个设置高度ngGrid.

Answer 4

是的,有一个插件,提供这样的设施,其ng-grid-flexible-height.js

你可以看到plunker其如何使用