如何改变ui-grid行的高度？

Question

我正在使用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 尝试为每个网格上下滚动行.差异应该非常明显.

Answer 1

取出:

height: 22px !important;

从css中添加:

rowHeight:22

到gridOptions.

我觉得这样更顺畅.

叉式弹药

Answer 2

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

Answer 3

尝试将此添加到您的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;
}