CODEWITHSUNDEEP
cssangularangular-materialangular-material-6
Meng
Meng

Reputation: 1188

angular material mat-select drop-down width

The current drop-down box has width greater than the the width of the line:
enter image description here

Is there a way to get rid of the extra width?
enter image description here

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

Upvotes: 10

Views: 21997

Answers (6)

Patrick
Patrick

Reputation: 1291

Set panelWidth on the component.

For example:

<mat-select panelWidth="200px">
</mat-select>

Documentation: https://material.angular.io/components/select/api

Upvotes: 1

David - ACA Group
David - ACA Group

Reputation: 509

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

Upvotes: 6

Roshan Madusanka
Roshan Madusanka

Reputation: 41

\add class to mat-form-field tag

\and write style to that class

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

Upvotes: 0

Suhas Zimbar
Suhas Zimbar

Reputation: 31

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

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

Upvotes: 2

Zubayer Bin Ayub
Zubayer Bin Ayub

Reputation: 310

Try this

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

Upvotes: 2

rikg93
rikg93

Reputation: 1269

Try this and change width:

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

Upvotes: 3

Related Questions