angular material mat-select drop-down width

mat-select comparewith
mat-select multiple
mat-select change event
mat-select default option
angular material dropdown menu
mat-select dropdown position
angular select on change
angular material select observable

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:


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


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


    margin-left: 15px;
    margin-top: 28px;

Try this and change width:

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

Cannot adjust the min-width of MatSelect select panel · Issue , When trying to adjust min-width property of the select panel, it should be Which versions of Angular, Material, OS, TypeScript, browsers are affected? for avoiding jumping problem but then the select dropdown does not  <mat-select> is a form control for selecting a value from a set of options, similar to the native <select> element. You can read more about selects in the Material Design spec. It is designed to work inside of a <mat-form-field> element. To add options to the select, add <mat-option> elements to the <mat-select>.

Try this

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

Select, The content of the <mat-option> is what will be shown to the user. Angular Material also supports use of the native <select> element inside of <mat-form-​field> . Angular material provides <mat-select> is a form control for selecting a value from a set of options, similar to the native <select> element. You can read more about selects in the Material Design spec. It is designed to work inside of an <mat-form-field> element. We can add options to the select by adding <mat-option> elements to the <mat-select>.

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

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

material2-select-width-issues, '~@angular/material/prebuilt-themes/deeppur. ple-amber.css';. body {. font-family: width: auto !important;. } .mat-select-value {. max-width: 100%;. width: auto;. }. Refer material angular basics @ Material Angular Io. Refer How to Start Material Angular @ InterfaceCreator. Refer How to Start Angular 6 step by step @ InterfaceCreator. Here we go for the steps to achieve Material multi-Select drop down with select all checkbox (Mat Checkbox). Material Angular Modules Used :

angular-material-select-custom-options, 14. 15. 16. 17. 18. 19. 20 .mat-select {. width:200px !important;. } .mat-option {. background-color: black;. } ///deep/ .cdk-overlay-container {. // display:inline-block​;. UI component infrastructure and Material Design components for mobile and desktop Angular web applications.

Is it possible for an Angular 2 mat-select to have a different mat , I am having trouble with the material mat-select initial selection box for the "drop-​down" menu's width being the same size as the options in the mat-select-panel. <mat-form-field> is a component used to wrap several Angular Material components and apply common Text field styles such as the underline, floating label, and hint messages. In this document, "form field" refers to the wrapper component <mat-form-field> and "form field control" refers to the component that the <mat-form-field> is wrapping (e.g

Angular Material Mat-Select Width Based on Longest Option Width , I have a mat-select with options, I am looking to set this inline to text and have the drop down only be as long as the longest option. I can probably do some  Perhaps we have a different version, but using width:80% is not a good idea. you should opt for padding , or similar instead Copy link Quote reply firstdev commented Jun 12, 2015

  • Possible duplicate:…
  • 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.
  • Did you ever figure this out? I am trying to do the same.
  • This is till a bug but here is a work around i found:
  • Did you try adding a class to the form container and set its width?
  • 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?
  • no this change the width, no the location. You could try min-width: calc(100%- 30px) where 30px is an example