CODEWITHSUNDEEP
angularangular-material2
pantonis
pantonis

Reputation: 6507

Angular Material 2 Datatable headers not aligned right

I have set the styles for header cell and cell to be aligned right but headers are not aligned only the cell text

Here is a link to a sample

I have added

.mat-cell, .mat-header-cell {
    text-align: right;
}

Upvotes: 3

Views: 6799

Answers (2)

tmjac2
tmjac2

Reputation: 156

This worked for me. I added the following to the css:

.mat-column-columnname {
    text-align: right;
    justify-content: flex-end;
}

And changed the location of the sort arrow to before the label:

<th mat-header-cell mat-sort-header arrowPosition='before' *matHeaderCellDef>

Upvotes: 2

Pankaj Parkar
Pankaj Parkar

Reputation: 136184

text-align: right doesn't work with display:flex element, and here you're trying to applying text-align property on mat-header-cell' elements mat-sort-header-container class. You could use below to fix your issue.

::ng-deep .mat-header-cell .mat-sort-header-container {
    justify-content: flex-end;
}

Forked Stackblitz

Upvotes: 5

Related Questions