0
890
ViewsRemove padding from mat-list-item
The mat-list component in angular/material2 applies a top and bottom padding of 16px. I'd like to make this 0px. I've tried applying a style with a higher specificity but it isn't working (or I'm doing it wrong).The style I'm trying to override is:
I'm trying to override this with:
.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>
·
Santiago Trujillo
3 answers
Answer question0
None of the previous proposions worked for me on Angular 6, 7 & 8
What I proposed is a deprecated solution (https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep) but it still continues to work:
:host /deep/ .mat-list-item-content {
padding: 0!important;
}
·
Santiago Trujillo
Report
0
In Angular Material 6, the blank space between list items is not because of padding but due to .mat-list-item height. You can get a more compact list with:
.mat-list .mat-list-item {
height: 50px; /* default is 72px */
}
·
Santiago Trujillo
Report
0
Another option is to turn off the components ViewEncapsulation.
@Component({
selector: 'list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.css'],
encapsulation: ViewEncapsulation.None
})
·
Santiago Trujillo
Report
Answer question