Column header wrapping when using Angular ui-grid

angular-ui-grid, angularjs, ng-grid

Solution

I believe I have found a way of wrapping text in the header columns by overriding the `ui-grid-cell-contents` CSS class.

.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;
}

Adding this to my site.css I find the column names are now wrapping onto the next line as expected.

Works in Chrome (v41) and Firefox (v35).

Problem

I have upgraded my AngularJS SPA application from `ng-grid v2.0.7` to `ui-grid v3` and my column headers no longer wrap around. My column headers are now single lined and show an ellipsis `...` when the column header doesn't fit. Has this feature been removed or is had it been superseded by a different method?

Original source