Column header wrapping when using Angular ui-grid

angularjs ng-grid angular-ui-grid
Intrepid picture Intrepid · Feb 25, 2015 · Viewed 15.9k times · Source

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?

Answer

Intrepid picture Intrepid · Feb 26, 2015

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).

Related questions

Best way to represent a Grid or Table in AngularJS with Bootstrap 3?

I am creating an App with AngularJS and Bootstrap 3. I want to show a table/grid with thousands of rows. What is the best available control for AngularJS & Bootstrap with features like Sorting, Searching, Pagination etc.

Read More
How to change height of ui-grid row?

I am using ui-grid. I have a lot of rows and that is why I use scrolling. Everything works perfectly ok until I try to change the height of the rows. Then the scrolling becomes a mess. I have added …

Read More
angular ui grid row template color based on condition

I need to change row color of angular ui grid based on some condition. The target is achieved in ng-grid as shown rowTemplate: '<div style="height: 100%" ng-class="{red: row.getProperty(\'viewed\') < 1}"><div ng-style="{ \'cursor\…

Read More