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的{{1}}，这样行不会溢出容器：

div

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

.ngViewport {
  height: auto !important;
}

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

Answer 4

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

您可以看到plunker的使用方式

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

4 个答案: