How to make mat-select always open right under the form field in angular2?

Question

I need the angular material mat-select component to open right under it's form field but it opens the dropdown on selected option position and the container moves a little to top according to the selected option. Is there a way to open the drop-down container right under the form field?

Answer 1

That behavior is prescribed by Material Design. You can turn off the centering over the selected option with the disableOptionCentering option, but this puts the top option over the field not below it. You could override that using CSS by specifying a panelClass option and set display and position properties appropriately, but this will not work properly if the window space prevents the panel from opening in the standard position.