23

我正在使用ui-grid。我有很多行，这就是我使用滚动的原因。一切正常，直到我尝试更改行的高度。然后滚动变得一团糟。我在这里添加了一个示例http://plnkr.co/edit/S6ylwOVgcQp7CSsZZxpR?p=preview 这是来自 ui-grid 网站的教程之一 - 我唯一改变的是 CSS。我已经添加了这些规则。

.ui-grid-cell-contents {
  padding: 1px 1px;
}

.ui-grid-render-container-body .ui-grid-header-cell,
.ui-grid-render-container-left .ui-grid-header-cell,
.grid .ui-grid-row,
.grid .ui-grid-cell,
.grid .ui-grid-cell .ui-grid-vertical-bar {
  height: 22px !important;
  font-size: 12px;
  line-height: 20px;
}
.ui-grid-render-container-body .ui-grid-header-cell,
.ui-grid-render-container-left .ui-grid-header-cell,
ui-grid-header-cell {
  height: 55px !important;
}
.ui-grid-filter-container {
  padding: 1px 3px;
}

如果删除了上述 CSS 规则，滚动就可以正常工作。所以我要么需要添加更多的 CSS 规则，要么需要使用网格的一些 API 才能正确设置行高。任何帮助都感激不尽。

如何更改行高并保持滚动流畅？

更新：这是默认网格和修改 CSS 的比较： http ://plnkr.co/edit/x1nQGvpkY4bRMs9D09Ws?p=preview 尝试为每个网格上下滚动行。区别应该很明显。

4

4 回答 4

48

取出：

height: 22px !important;

从CSS并添加：

rowHeight:22

到网格选项。

我有这样的感觉，这要顺畅得多。

分叉的柱塞

于 2014-12-01T13:23:20.030 回答
22

scope.gridOptions = { rowHeight: 33 } 更改行高的最佳方法是使用网格选项。

于 2015-01-14T13:27:29.227 回答
8

尝试将此添加到您的CSS：

.ui-grid-viewport .ui-grid-cell-contents {
  word-wrap: break-word;
  white-space: normal !important;
}

.ui-grid-row, .ui-grid-cell {
  height: auto !important;
}

.ui-grid-row div[role=row] {
  display: flex ;
  align-content: stretch;
}
于 2016-03-02T05:03:59.537 回答
0

只需相应地更改网格类。

.grid{
    height: 70vh;
}
于 2016-09-07T07:23:11.467 回答