it-swarm.com.ru

Удалить отступы из mat-list-item

Компонент mat-list в angular/material2 применяет верхний и нижний отступы 16px. Я хотел бы сделать это 0px. Я пытался применить стиль с более высокой специфичностью, но он не работает (или я делаю это неправильно). Стиль, который я пытаюсь переопределить:

mat-list-item-content style applying 16px padding

Я пытаюсь переопределить это с:

.list .mat-list .mat-list-item .mat-multi-line .mat-list-item-content {
  padding-top: 0;
  padding-bottom: 0;
}
<div class="list">
  <mat-list>
    <mat-list-item *ngFor="let item of queue">
      <h1 matLine>{{ item.id }}: {{ item.status}} {{ item.statusDate }}</h1>
      <p matLine>{{ item.name }}</p>
      <p matLine>for {{ item.customer }}</p>
      <div matLine>
        <button mat-icon-button (click)="openTab(item)">
          <mat-icon fontIcon="icon-open"></mat-icon>
        </button>
        <button *ngIf="showAssignToMe" mat-icon-button (click)="assignToMe(item)">
          <mat-icon fontIcon="icon-assign_to_me"></mat-icon>
        </button>
        <button mat-icon-button (click)="notes(item)">
          <mat-icon fontIcon="icon-comment"></mat-icon>
        </button>
      </div>
    </mat-list-item>
  </mat-list>
</div>
7
Craig

Ни одно из предыдущих предложений не работало для меня на Angular 6 (и Angular 7)

Я предложил устаревшее решение ( https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep ), но оно все еще продолжает работать:

:Host /deep/ .mat-list-item-content {
  padding: 0!important;
}
11
Cedric Arnould

В Angular Material 6 пустое пространство между элементами списка не из-за заполнения, а из-за высоты .mat-list-item. Вы можете получить более компактный список с:

.mat-list .mat-list-item {
  height: 50px; /* default is 72px */
}
0
Mel

Все, что вам нужно сделать, это удалить пробел между .mat-list-item и .mat-multi-line, потому что оба класса применяются к одному и тому же элементу. Другими словами используйте селектор:

.list .mat-list .mat-list-item.mat-multi-line .mat-list-item-content
0
Wilhelm Olejnik