Remove padding from mat-list-item

Question

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>

Cedric Arnould · Answer 1 · 2019-08-12T14:40:45.627

33

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;
}

edited Aug 12 '19 at 14:40

answered Aug 20 '18 at 19:10

Cedric Arnould

1,991
4
29
49

4

It still works in Angular 7, but I wish I had a better solution – Anderson Madeira Dec 12 '18 at 13:20
Yes me too, I dont really like to use deprecated solution ... If you find one, please le met know, I m interested too :) – Cedric Arnould Dec 12 '18 at 19:57
I need to remove padding-right when scrollbar exists... Sure wish didn't have to implement deprecated code :/ – ttugates Feb 15 '19 at 17:02
@CedricArnould See my answer below – Joe Moon May 14 '20 at 19:11

score 13 · Answer 2 · answered Jul 19 '18 at 09:15

13

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 */
}

answered Jul 19 '18 at 09:15

Mel

5,837
10
37
42

This was exactly what I was looking for. Ty – lmo Nov 02 '21 at 08:50

score 10 · Answer 3 · answered Jul 10 '19 at 21:30

10

Another option is to turn off the components ViewEncapsulation.

@Component({
    selector: 'list',
    templateUrl: './list.component.html',
    styleUrls: ['./list.component.css'],
    encapsulation: ViewEncapsulation.None
})

answered Jul 10 '19 at 21:30

Ian Hoar

1,174
1
19
40

score 9 · Answer 4 · answered Aug 13 '20 at 10:46

9

I had the same problem. Solved it like this

:host ::ng-deep .mat-list-item-content { padding: 0!important; }

answered Aug 13 '20 at 10:46

Denis Murimi

91
1
1

4

It would be helpful if you could explain a little more about that code. – Abhishek Aug 13 '20 at 11:30

Joe Moon · Answer 5 · 2020-05-14T19:15:53.150

I know this is an older question, but I was banging my head trying to figure out how to override padding for the list item text next to a checkbox. The style class I was trying to change was

.mat-list-base .mat-list-item.mat-list-option .mat-list-item-content .mat-list-text

which had a left padding of 16px.

The trick is: it has to go in the root stylesheet. If you don't want it to apply everywhere, add another class to increase specificity. In my case, I added .less-padding like so:

.mat-list-base .less-padding.mat-list-item.mat-list-option .mat-list-item-content .mat-list-text { padding-left: 8px; }

Add the class to the <mat-list-option> tag in your HTML

This is true and works, but is strongly discouraged by the Materials guidelines since it will likely break during a future upgrade of Materials: https://material.angular.io/guide/customizing-component-styles — Daniel Methner, Mar 17 '23 at 16:33

score 4 · Answer 6 · answered Apr 29 '19 at 10:13

4

.mat-list-item{
  max-height: 25px;
}

answered Apr 29 '19 at 10:13

Annanya Jain

49
1
1

13

It's better to provide more information. Not just a code. – vik_78 Apr 29 '19 at 10:21

score 2 · Answer 7 · answered Jun 10 '20 at 21:13

2

Just got it by doing this:

.mat-list-base .mat-list-item .mat-list-item-content {
    padding: 0px !important
}

answered Jun 10 '20 at 21:13

Welyngton Dal Prá

758
1
10
19

score 1 · Answer 8 · answered Feb 23 '18 at 01:21

1

All you have to do is to remove space between .mat-list-item and .mat-multi-line because both classes are applied to the same element. In other words use selector:

.list .mat-list .mat-list-item.mat-multi-line .mat-list-item-content

answered Feb 23 '18 at 01:21

Wilhelm Olejnik

2,382
3
14
21

score 1 · Answer 9 · answered Nov 15 '20 at 21:11

A fairly reusable method is getting the selectors from DevTools or whatever browser debug tool you are using.

For example, In Chrome: Right-click and inspect the element you want to remove the padding from i.e the <mat-list-item> element. In the styles pane filter by padding, or whichever property you are trying to change. You'll see the selectors that are setting padding.

Youll need to copy each one into your CSS/SCSS and add the properties you need. For example, I copied from the styles pane:

.mat-list-base[dense] .mat-list-item .mat-list-item-content, .mat-list-base[dense] .mat-list-option .mat-list-item-content

Use this in your stylesheet. You need to do this for each selector block in the style pane. From the section you've just copied, click the orange tick next to padding. You'll see the padding in next selector section below have its strikethroughs removed. Copy that sections selectors to your style sheet. Repeat through this process until you've got all the selectors needed.

My Style sheet ended up looking like this for removing the padding on a <mat-list-item>


.mat-list-base[dense] .mat-list-item .mat-list-item-content, .mat-list-base[dense] .mat-list-option .mat-list-item-content{
    padding: 0 !important;
    
}
.mat-list-base .mat-list-item .mat-list-item-content, .mat-list-base .mat-list-option .mat-list-item-content {
    padding: 0 !important;
}

score 1 · Answer 10 · answered Feb 11 '21 at 10:17

To add on top of @ian-hoar's answer, once you have turned off View Encapsulation asbelow:

@Component({
selector: 'list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.css'],
encapsulation: ViewEncapsulation.None
})

you don't have to rely on ::ng-deep or :host ::ng-deep etc as they are deprecated.

For instance, if you want to override padding for mat-list-item, all you have to do is

.list .mat-list-base .mat-list-item .mat-list-item-content {
  padding: 0 !important;
}

score 0 · Answer 11 · answered Jan 04 '20 at 00:59

0

HTML

<mat-selection-list ...
    <mat-list-option formfilters *ngFor="let ...

SCSS (low level scss like src/styles.scss)

.mat-list-option[formfilters] {
    .mat-list-item-content {
        padding: 2px !important;
    }
}

answered Jan 04 '20 at 00:59

Matias Frith

1
1

Joel Stevick · Answer 12 · 2021-04-26T13:26:07.037

0

You can override the styling in your styles.sccs file.

For example,

.mat-list-item-content {
  padding: 0 !important;
}

Note the use of !important, without !important the style will be overriden by the theme.

edited Apr 26 '21 at 13:26

answered Apr 25 '21 at 18:00

Joel Stevick

1,638
2
16
22

Why is this working if I add it to the styles.scss but not if i add it to the stylesheet of the component? – Silvan Jan 16 '23 at 08:33

score -1 · Answer 13 · answered Dec 25 '19 at 06:29

-1

this worked for me

<mat-action-list *ngFor="let item of dataSource" style="padding-top: 0%;">

answered Dec 25 '19 at 06:29

Rajan Garg

19
2

this is not the good approach. We should not encourage inline-CSS unless we dont have any option. In-line CSS is just like a patch; – Bimlendu Kumar Oct 07 '20 at 14:46

Remove padding from mat-list-item

13 Answers13