使用 Angular ui-grid 时第 header 列换行

Question

我已将我的 AngularJS SPA 应用程序从 ng-grid v2.0.7 升级到 ui-grid v3，并且我的专栏 header 不再环绕。我的列 header 现在是单行的，当列 header 不适合时显示省略号 ...。

此功能是否已删除或已被其他方法取代？

Answer 1

我相信我已经找到了一种通过覆盖 ui-grid-cell-contents CSS class.

来换行 header 列中的文本的方法

.ui-grid-header-cell .ui-grid-cell-contents {
     height: 48px;
     white-space: normal;
     -ms-text-overflow: clip;
     -o-text-overflow: clip;
     text-overflow: clip;
     overflow: visible;
}

将此添加到我的 site.css 我发现列名称现在按预期换行到下一行。

适用于 Chrome (v41) 和 Firefox (v35)。

Answer 2

我添加了以下 css 以使我的工作正常。行高根据需要的行数自动调整。水平滚动时，它会根据可见的内容更改为行数。

.ui-grid-header-cell-label {
    display:inline-block;
    white-space:initial;
}

使用 Angular ui-grid 时第 header 列换行

Column header wrapping when using Angular ui-grid

angularjs

ng-grid

angular-ui-grid