Как выровнять содержимое мат-ячейки со значком вправо на angular2 / материале?

Чтобы начать с моего кода:

<!-- 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>

Требование заключается в том, чтобы отрегулировать положение значка редактирования вправо (относительно правого отступа в материальном дизайне)? Прямо сейчас он, кажется, принудительно пристыкован к левой стороне. Применение style="{text-align: right}" к md-ячейке не работает.

версия библиотек:

"@angular/material": "2.0.0-beta.10"
"@angular/cdk": "^2.0.0-beta.10",
"@angular/common": "^4.1.3"

angular html css angular-material angular-material2
person v.chjen    schedule 18.09.2017    source источник
comment
Вы случайно не используете FlexLayout? Здесь вы можете использовать директивы fxLayout, размещение их с помощью fxFlex не должно быть проблемой   -  person Sonicd300    schedule 18.09.2017

Ответы (1)


arrow_upward
14
arrow_downward

Используйте любой из них:

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

}

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

ДЕМО

person Vega    schedule 18.09.2017
comment
Сработало как положено. Большое спасибо! - person v.chjen; 18.09.2017
comment
Большой! :) Если вы хотите выровнять и заголовки: stackoverflow.com/a/46155684/5468463 - person Vega; 18.09.2017