Wenn Sie ag-grid verwenden, können Sie einen langen Header auf zwei Zeilen aufteilen ...
Ein Bruch in columnDefs headerName: 'Long<br />Header'
bringt mich dort hin (mit dev tools kann ich sehen, dass der Text das 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 habe mich gefragt, ob ich Gruppenköpfe als Zwischentitel verwenden soll, um den Text zu teilen, aber längerfristig (wenn ich gruppieren muss), das ist keine Option ...
Versuchen Sie Folgendes zu Ihrem CSS hinzuzufügen:
%Vor%und fügen Sie dies Ihren Rasteroptionen hinzu:
%Vor% Für mich, mit der Kombination von [email protected] und [email protected] , funktionierte Folgendes:
:: ng-deep ist ein Angular CSS-Kombinator (Anweisung) ). Dies basiert auf Stians Antwort mit dem Unterschied, dass in meinem Fall, anstatt .ag-header-cell-label , nur mit .ag-header-cell-text funktioniert.
Im Grid-Optionen-Objekt müssen Sie die Kopfhöhe einstellen:
%Vor%Unter Verwendung von [email protected] funktionierte nur die folgende Lösung:
%Vor% Dies ist eines der ersten Male in meiner Arbeit mit CSS, das ich jemals wirklich gebraucht habe, um !important zu benutzen.
Tags und Links ag-grid