How to align mat-cell content with icon to right on angular2/material?
11,983
Use either of these:
mat-cell{
display:flex !important;
justify-content:flex-end!important;
}
::ng-deep .mat-cell{
display:flex !important;
justify-content:flex-end!important;
}
Comments
-
v.chjen almost 2 years
To begin with my Code:
<!-- Edit Column --> <ng-container mdColumnDef="edit"> <md-header-cell *mdHeaderCellDef> {{'companies.edit-column' | translate}}</md-header-cell> <md-cell *mdCellDef="let element"><a (click)="toCompany(element.id)"><md-icon class="md-dark">edit</md-icon></a></md-cell> </ng-container>
The Requirement is to adjust the position of the edit icon to the right (with respect of material design's right padding)? Right now it appears to be forcibly left-docked. Applying a
style="{text-align: right}"
to md-cell does not work.version of libs:
"@angular/material": "2.0.0-beta.10" "@angular/cdk": "^2.0.0-beta.10", "@angular/common": "^4.1.3"
-
v.chjen over 6 yearsWorked as expected. Thanks a lot!
-
Vega over 6 yearsGreat! :) If you wish to align the headers too : stackoverflow.com/a/46155684/5468463