title: How to load angular material select mat-option list below the select field correctly.
body: <p>I am using the material select element mat-select in my application. I want to load the option list just below the select field, like a regular select box and not as a overlay style give. For that I have applied the below style to given select element. </p>
  
  <pre><code>             &lt;mat-form-field&gt;
                    &lt;mat-select [formControlName]="input1"&gt;
                          &lt;mat-option&gt;None&lt;/mat-option&gt;
                          &lt;mat-option *ngFor="let opt_value of  input1.enumNames; let i = index" value="{{input1.enum[i]}}" &gt;{{opt_value}}&lt;/mat-option&gt;
                    &lt;/mat-select&gt;
  
               &lt;/mat-form-field&gt;   
  </code></pre>
  
  <p>Here is the style that I applied after inspecting the responsible element. </p>
  
  <pre><code>.mat-select-panel {
     transform: translate(-2px, 44px) !important;
    font-family: Lato,sans-serif;
  
  }
  </code></pre>
  
  <p>Now when I click the first time on the select field, The options list loads as desired, just below the select field.  Like this...</p>
  
  <p><a href="https://i.stack.imgur.com/KQ7Ku.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KQ7Ku.png" alt="enter image description here"></a></p>
  
  <p>But after selecting any option (except than 'none') if I again click on the field to change the option, the option list load as old material style like this and hide my select field somewhere behind yellow highlight.</p>
  
  <p><a href="https://i.stack.imgur.com/E4SnA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/E4SnA.png" alt="enter image description here"></a> </p>
  
  <p>How to style Mat-options or mat-select-panel correctly so that I always get the result as per the first image. </p>