CODEWITHSUNDEEP
cssangularangular-material2
Craig
Craig

Reputation: 990

Remove 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:

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

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>

Upvotes: 34

Views: 48143

Answers (14)

user12163165
user12163165

Reputation: 627

for those who use Angular 15+
Just add a custom class like that <mat-list-item class="my-custom-class"></mat-item-list>
Now add the following lines to the .css file of the same component.

.my-custom-class.mdc-list-item {
    padding-left: 0;
    padding-right: 0;
}

enjoy!

Upvotes: 1

Joel Stevick
Joel Stevick

Reputation: 2038

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.

Upvotes: 0

Steffi Keran Rani J
Steffi Keran Rani J

Reputation: 4113

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

Upvotes: 1

MR-DS
MR-DS

Reputation: 102

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

Upvotes: 1

Denis Murimi
Denis Murimi

Reputation: 91

I had the same problem. Solved it like this

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

Upvotes: 9

Welyngton Dal Pra
Welyngton Dal Pra

Reputation: 774

Just got it by doing this:

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

Upvotes: 2

Joe Moon
Joe Moon

Reputation: 145

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

Upvotes: 5

Arcturus
Arcturus

Reputation: 1

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

Upvotes: 0

Rajan Garg
Rajan Garg

Reputation: 1

this worked for me

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

Upvotes: -1

Cedric Arnould
Cedric Arnould

Reputation: 2433

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

Upvotes: 34

Ian Hoar
Ian Hoar

Reputation: 1184

Another option is to turn off the components ViewEncapsulation. 

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

Upvotes: 10

Annanya Jain
Annanya Jain

Reputation: 49

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

Upvotes: 4

Mel
Mel

Reputation: 6075

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

Upvotes: 14

Wilhelm Olejnik
Wilhelm Olejnik

Reputation: 2507

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

Upvotes: 1

Related Questions