2015-11-24 13 views
8

Utilizzando ag-grid, c'è un modo per dividere un lungo colpo di testa su 2 righe ...Come wordwrap un colpo di testa in ag-grid

Una pausa nella columnDefs HeaderName: 'Long<br />Header' mi fa parte modo lì (usando gli strumenti di sviluppo posso vedere il testo ha il br), tuttavia uno degli elementi circostanti ha un'altezza di 25px; <div class="ag-header" style="height: 25px;"> che penso non faccia visualizzare la seconda riga dell'intestazione.

mi chiesi sull'utilizzo di intestazioni di gruppo come un interim per ottenere la scissione di testo, ma a più lungo termine (quando ho bisogno di gruppo) che non sarà un'opzione ...

risposta

15

tenta di aggiungere il seguente al vostro CSS:

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

e aggiungere questo ai vostri opzioni della griglia:

headerHeight: 48 
+1

Sembra che solo il white-space: normale è necessario –

+0

questo ha funzionato per me, ma ora sto ottenendo un testo disallineate a causa all'icona del menu. l'icona del menu a destra mostra la linea superiore a sinistra. questo fa sì che l'intestazione di due righe non si centra l'una sull'altra ma si trova a sinistra. Qualche consiglio sullo styling con quello? – Jake

+0

'overflow-wrap: break-word;' aiuta anche se si hanno intestazioni lunghe di una singola parola (ad es. Se sei tedesco). – JulienD

Problemi correlati