angular material mat-select drop-down width

Question

The current drop-down box has width greater than the the width of the line:

Is there a way to get rid of the extra width?

Here is my current code:

html:

<mat-form-field>
    <mat-select disableOptionCentering placeholder="Choose an option">
      <mat-option [value]="option" *ngFor="let option of my_list">
          {{ option }}
      </mat-option>
    </mat-select>
</mat-form-field>

my_list:

export const my_list: string[] = [ "a", "b", "c", "d"];

style.css:

.mat-select-panel{
    margin-left: 15px;
    margin-top: 28px;
}

Possible duplicate: https://stackoverflow.com/questions/48605953/how-to-use-scroll-event-in-angular-material-mat-select — rikg93, Sep 18 '18 at 13:34
Hi RikG93, I don't think two posts are talking about the same thing. Here I want to reduce the width of the scrollable panel. The answer in the link provides a solution to load more when scrolling down in the scrollable panel. — Meng, Sep 18 '18 at 13:47
This is till a bug but here is a work around i found: https://github.com/angular/components/issues/14515 — Vlad, Jul 24 '19 at 16:40
Did you try adding a class to the form container and set its width? — Jay Ordway, Oct 24 '19 at 00:36

score 6 · Answer 1 · answered May 08 '21 at 13:21

For anyone still trying to figure out without making the actual select smaller or wider.

The mat-select-panel uses 100% of the mat-select width plus 32px

min-width: calc(100% + 32px)

You can override this styling with ng-deep:

::ng-deep .mat-select-panel {
    min-width: 100% !important;
}

score 3 · Answer 2 · answered Sep 18 '18 at 14:03

3

Try this and change width:

   <mat-select style="width:10px">

answered Sep 18 '18 at 14:03

rikg93

1,101
1
11
21

This moves the location of the mat-select-arrow. Is it possible to have the mat-select-arrow at the end and the width of scrollable panel = the width of the underline? – Meng Sep 18 '18 at 15:14
no this change the width, no the location. You could try min-width: calc(100%- 30px) where 30px is an example – rikg93 Sep 19 '18 at 11:23

score 2 · Answer 3 · answered Sep 25 '19 at 11:24

2

Try this

.mat-select-panel:not([class*=mat-elevation-z]){ min-width: calc(100% + 0px) !important; }

answered Sep 25 '19 at 11:24

Zubayer Bin Ayub

310
3
11

score 2 · Answer 4 · answered May 30 '20 at 08:53

2

set width at mat-form-field tag level. try this,

<mat-form-field style="width:50px">

answered May 30 '20 at 08:53

Suhas Zimbar

31
4

score 0 · Answer 5 · edited Dec 21 '20 at 12:00

0

\add class to mat-form-field tag

\and write style to that class

.input-container {
  width: 100%;
  \\  enter code here
}

edited Dec 21 '20 at 12:00

Mario Petrovic

7,500
14
42
62

answered Dec 21 '20 at 11:28

Roshan Madusanka

41
2

angular material mat-select drop-down width

5 Answers5