关闭Angular UI ng-grid中的滚动?

时间:2013-08-16 14:36:55

标签: angularjs angular-ui ng-grid

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

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

关于去哪儿的任何建议?

4 个答案:

答案 0 :(得分:10)

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

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

答案 1 :(得分:8)

我最近遇到了同样的问题,并在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 :(得分:6)

在CSS中,您可以尝试覆盖包含行的height的{​​{1}},这样行不会溢出容器:

div

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

.ngViewport {
  height: auto !important;
}

根据您的表格布局,您可能还需要更改其他一些样式,但这些是主要的样式。另请注意不要为整个.ngCanvas { width: 100% !important; } .ngRow { width: 100% !important; } 设置高度。

答案 3 :(得分:5)

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

您可以看到plunker的使用方式