J'ai quelques colonnes qui ont quatre mots, à savoir Suivi de la négociation avant, Suivi de la négociation et certaines d'entre elles ayant trois mots. J'ai essayé le CSS ci-dessous pour envelopper le texte à plusieurs lignes.
::ng-deep .ag-theme-material .ag-header-cell-label .ag-header-cell-text{
white-space: normal;
overflow-wrap: break-Word;
}
HTML
<ag-grid-angular class="ag-theme-material" [rowData]="rowData" [columnDefs]="columnDefs" [overlayLoadingTemplate]="overlayLoadingTemplate" [domLayout]="domLayout" [enableSorting]="true" (gridReady)="onGridReady($event)" (gridOptions)="gridOptions" >
</ag-grid-angular>
mais l'en-tête de colonne reste le même. Je voulais encapsuler le texte de l'en-tête de colonne sur plusieurs lignes. Y a-t-il un moyen de faire ça?
Remarque: Je peux envelopper le contenu à l'aide de cellStyle: {'white-space': 'normal'}
{headerName: 'headername', field: 'headerfield', autoHeight:true, width: 100, cellStyle: {'white-space': 'normal'}},
Mais je voulais envelopper la tête.
Veuillez revoir l'exemple de stackblitz suivant.
https://stackblitz.com/edit/angular-ag-grid-angular-xmbm3p?embed=1&file=styles.css
Dans la feuille de style globale, j'ai appliqué ce qui suit ... vous pouvez utiliser ::ng-deep
dans votre composant css, c'est le premier stackblitz que j'ai trouvé avec ag-grid
à fork et ce n'est pas le mien, il n'y avait donc pas de composant CSS à utiliser.
.ag-header-cell-label .ag-header-cell-text {
white-space: normal !important;
}
La prochaine étape consiste à utiliser la propriété headerHeight
this.gridOptions = <GridOptions>{
headerHeight:75,
Cette partie est malheureusement inévitable ... elle ne vous permet pas non plus de rendre la hauteur de l’en-tête dynamique en fonction des exigences de retour à la ligne.
top
de manière dynamique lorsque la vue est rendue. Le réglage de la hauteur de l'en-tête via l'option ::ng-deep
ne modifiera pas dynamiquement décaler le top
de la zone de contenu vers le bas, comme il est calculé par la propriété headerHeight
... est 25px
donc la zone top
pour le contenu est également 25px
. ::ng-deep
.. de sorte que vous ne savez pas si ::ng-deep
vraiment travaillé ... visuellement c'est-à-dire ... puisque l'en-tête s'étend sous la zone de contenu.Désolé de dire, mais ce sera aussi proche que vous pouvez obtenir ... ajuster tous les éléments, décaler le top
etc basé sur une hauteur d'en-tête dynamique via une manipulation DOM Je crains devenir trop moche ... et si vous avez besoin de la hauteur d'en-tête dynamique au point qu'il s'agisse d'un show stopper ... il peut être préférable d'explorer d'autres options en remplacement de ag-grid
.
https://www.ag-grid.com/javascript-grid-column-header/#headerHeight
Pour obtenir le résultat attendu, utilisez ci-dessous l’option d’utilisation des définitions de colonne de balise de saut de ligne - br in pour cette colonne spécifique
{headerName: 'Pre<br>Trading<br> Follow<br> Up', field: 'headerfield', autoHeight:true, width: 100, cellStyle: {'white-space': 'normal'}}