web-dev-qa-db-fra.com

Supprimer le rembourrage de mat-list-item

Le composant mat-list dans angular/material2 applique un remplissage supérieur et inférieur de 16 px. Je voudrais faire cette 0px. J'ai essayé d'appliquer un style avec une spécificité plus élevée, mais cela ne fonctionne pas (ou je me trompe). Le style que j'essaie de remplacer est le suivant:

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

J'essaie de remplacer ceci avec:

.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>
cssangularangular-material2
7
Craig

Aucune des propositions précédentes ne fonctionnait pour moi sur Angular 6 (et Angular 7)

Ce que j’ai proposé est une solution déconseillée ( https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep ) mais cela continue de fonctionner:

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

Dans le matériau angulaire 6, l'espace vide entre les éléments de liste n'est pas dû au remplissage, mais à la hauteur de .mat-list-item. Vous pouvez obtenir une liste plus compacte avec:

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

Tout ce que vous avez à faire est de supprimer l'espace entre .mat-list-item et .mat-multi-line car les deux classes sont appliquées au même élément. En d'autres termes, utilisez le sélecteur:

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