Intrepid Intrepid - 1 year ago 218
AngularJS Question

Column header wrapping when using Angular ui-grid

I have upgraded my AngularJS SPA application from

ng-grid v2.0.7
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 Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download