Column header wrapping when using Angular ui-grid

Question

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?

Lyallpur

Answer 1

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

Lyallpur

Is there a way to wrap cells and height is automatic, such that no value will be clipped? – Vigilance

height: auto !important; To make the height of the header automatic font-size: 11px; Reduce font size – Amianthus

An improved version, plnkr.co/edit/BZFcGHB7lY120bEOnDyn?p=preview – Eugenol

Answer 2

I added the following css to get mine to work. The line height auto adjusts when depending on the number of lines needed. When scrolling horizontally, it will change to number of lines based on what is visible.

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

Roulade