angular material2 select component alignment

Question

I am using a material components and I want to know if is possible to set the size of dropdown select to be exactly with the size of mat-form-field.

the default component is like:

And I want to modify that in order to have the dropdown exactly same size as mat-form-field like this:

but I don't know how to modify the width size and position of the dropdown container, do how can I modify that width size and position.

here is a small example with the component:

https://stackblitz.com/angular/rllajkqybnmy

Answer 1

unfortunately, you need to add !important to the things you add since angular material adds the location as a style attribute

basically, you need to add\change 3 attributes:

• max-width - don't allow the select to change if content is wider
• min-width - same
• transform - to change the location of the select

notice that there's still an animation placement which starts at the original position.

This is the basic change:

.mat-select-panel {
  min-width: 180px !important;
  max-width: 180px !important;
  transform: translate(-2px, 44px) !important;
}

/* this will hide the element while it's being animated because
   the animation happens for the original position */

.mat-select-panel.ng-animating {
  display: none;
}

Add that to your styles.css, since this element is injected outside of the component.

demo: https://stackblitz.com/edit/angular-material-select-location?file=styles.css