I am using version 14 of angular (and angular material).
I've migrated from primeNg to Material, and have noticed that my th
block using the [mat-header-sort]
directive do not display the ellipsis style anymore. Thus it is still detected in the inspector as applied.
Other th
that do not use the sorting directive still work perfectly fine.
See by yourself:
click here to see the displayed result of table header
Here is an example of my html:
<ng-container *ngIf="column.sortAttributeName; else noSortable">
<th mat-header-cell
[mat-sort-header]="column.sortAttributeName"
*matHeaderCellDef
[matTooltip]="column.field.displayName | translate"
matTooltipPosition="above"
[style.width]="column.size">
<ng-container *ngIf="headerDef; else defaultHeader">
<ng-container *ngTemplateOutlet="headerDef.templateRef">
</ng-container>
</ng-container>
</th>
</ng-container>
And the css associated:
.mat-header-cell {
font-size: 16px !important;
font-weight: bold !important;
padding-right: 20px;
position: relative;
color: #000 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
flex: 1 !important;
}
Now, if I remove the [mat-sort-header]="column.sortAttributeName"
, I get the ellipsis style working again. I have tried changing the arrow position, giving fixed size to the mat table, and applying different kind of styles such as giving to my container a min-width: 0, but none of these attempts worked for me.
Is there something that I am missing?