CODEWITHSUNDEEP
htmlcssangularangular-materialangular-material2
v.chjen
v.chjen

Reputation: 625

How to align mat-cell content with icon to right on angular2/material?

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"

Upvotes: 8

Views: 14520

Answers (1)

Vega
Vega

Reputation: 28738

The content of mat-cells are aligned to left by default. But you still can align them to center or right by redefining the display property. The following will align to right for ltr direction writing:

mat-cell{
  display:flex !important;
  justify-content:flex-end!important;
}

In the Demo, the table cells are aligned to the right, while headers are still to the left

Upvotes: 14

Related Questions