2015-11-24 10 views
8

Mit ag-Raster wordwrap, ist es eine Möglichkeit, einen langen Header über 2 Reihen zu spalten ...wie einen Header in ag-grid

Ein Bruch in der columnDefs header: 'Long<br />Header' wird mir dort einen Teil des Weges (mit dev tools kann ich sehen, dass der Text die br hat), aber eines der umgebenden Elemente hat eine Höhe von 25px; <div class="ag-header" style="height: 25px;"> was meiner Meinung nach dazu führt, dass die zweite Zeile der Kopfzeile nicht angezeigt wird.

Ich wunderte mich über Gruppenköpfe als Zwischen mit dem Text Split zu erhalten, aber längerfristig (wenn ich zu einer Gruppe müssen), die keine Option ...

Antwort

15

Versuchen Sie Folgendes hinzufügen wird zu Ihrem CSS:

.ag-header-cell-label { 
    text-overflow: clip; 
    overflow: visible; 
    white-space: normal; 
} 

und fügen Sie diese zu Ihrer Rasteroptionen:

headerHeight: 48 
+1

Sieht aus wie nur der white-space: normal benötigt –

+0

dies für mich gearbeitet, aber jetzt bin ich immer etwas falsch ausgerichtet Text durch zum Menüsymbol. Das Menüsymbol auf der rechten Seite hebt die obere Zeile nach links. Dies führt dazu, dass die beiden Zeilenköpfe nicht übereinander liegen, sondern links liegen. Irgendwelche Tipps zum Styling mit dem? – Jake

+0

'overflow-wrap: break-word;' hilft auch, wenn Sie lange Single-Word-Header haben (z. B. wenn Sie Deutsch sind). – JulienD