0

How do I remove this padding for the ma-select-panel.

Highlight the padding

I have tried using

ng:deep .mdc-menu-surface.mat-mdc-select-panel {
padding: 0px !important;
}

But I just couldn't remove it.

Any help would be greatly appreciated, thanks in advance for your help.

sahus
  • 328
  • 1
  • 9
  • BAAAAD: ::ng-deep .mat-mdc-select-panel { padding: 0 !important; } GOOOD: ideally namespace to body tag. but let's be less destructive now and add class to component as below. and add this to root styles: .myClass { &.mat-mdc-select-panel { padding: 0; background: red; } } – SO is full of Monkeys Aug 29 '23 at 04:51

1 Answers1

1

See that a mat-select create a cdk-overlay. This means that the "panel" is "outside" the component -really is outside the whole app-.

This is the reason you need makes the .css was in any way "global".

I generally use the styles.css (not the component.css)

div.mat-mdc-select-panel
{
    padding:0;
}

If you don't want this .css is applied to all the mat-select in your application is when you use the property panelClass this allow you write

<mat-select panelClass="custom-select">
   ...
</mat-select>

And use

.custom-select.mat-mdc-select-panel {
  padding:0;
}

There're another option that it's use

encapsulation: ViewEncapsulation.None

But I don't like so much because this makes that all the .css in your component is applied to all the applicacion -it's the same that include the component.css in your styles.css

Eliseo
  • 50,109
  • 4
  • 29
  • 67
  • Thank you, this worked. Just had to add `!important` in the CSS. – sahus Aug 30 '23 at 03:49
  • 2
    @sahus, you should avoid use `!important`, It's better makes more "specific" the .css ( (have more selecters) Use the developer tools in your navigator (F12), check what css definition it's more especific. Well, I do it and I think that the .css should be `div.custom-select.mat-mdc-select-panel` (see the "div") – Eliseo Aug 30 '23 at 07:21