-1

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?

Mark Rotteveel
  • 100,966
  • 191
  • 140
  • 197
Xavi
  • 1
  • 2

0 Answers0