Angularjs ui-grid行未根据内容调整大小答案

【问题标题】：Angularjs ui-grid row not resizing according to contentAngularjs ui-grid行未根据内容调整大小
【发布时间】：2015-09-09 03:52:23
【问题描述】：

我有一个 ui-grid(v3.0.0-rc.20-8199eb5) cellTemplate，它遍历一个数组并打印出列中的名称。

{name:'roles', cellTemplate: '<div ng-repeat="role in row.entity.roles>{{role.name}}</div>'}

行高不足以容纳内容并将其截断。根据条目的角色数量，每个条目的行高会有所不同。

有没有办法让整行根据行中的内容自动扩展/调整大小？

【问题讨论】：

标签： angularjs angular-ui angular-ui-grid

【解决方案1】：

最终对我有用的解决方案是编辑 ui-grid 的 css。

.ui-grid-cell { display : table-cell; height: auto !important; overflow:visible; position: static; padding-top: 10px; } 
.ui-grid-row { display : table-row; height: auto !important; position: static; } 
.ui-grid-cell-contents{ height: auto !important; white-space: normal; overflow:visible; }

【讨论】：

这仍然适用于当前版本吗？我一直在尝试类似的东西（然后尝试将您的代码粘贴进去），但我仍然看到奇怪大小的单元格。没关系。我的问题与为交替行着色有关。
关于如何在单元格/行中垂直居中文本的任何想法？

【解决方案2】：

这是我为了获得自动行/单元格高度而修改的 CSS。（我稍微修改了@Rentius2407 所做的并删除了一些不必要的（？）属性。

.ui-grid-row {
  display: table-row;
  height: auto !important;
}
.ui-grid-cell {
  display: table-cell;
  height: auto !important;
  vertical-align: middle;
  float: none;
}
.ui-grid-cell-contents {
  height: auto !important;
}

此外，这会破坏 ui-grid 中的虚拟化滚动，因此为了使滚动正常工作，我必须通过设置 virtualizationThreshold: 100 来禁用虚拟化。就我的目的而言，我知道我一次显示的行数不会超过 100 行，但您应该能够根据需要修改 virtualizationThreshold。

【讨论】：