title: Angular Material Select styling not behaving correctly
body: <p>I am following this example of using a material select field: <a href="https://material.angular.io/components/select/overview" rel="nofollow noreferrer">https://material.angular.io/components/select/overview</a></p>
  <p>I have this list in my ts file:</p>
  <pre><code>  accessTypes: string[] = [
      'New Employee', 'Rehire', 'New Provider', 'New Resident/Fellow', 'Transfer/Job Title Change',
      'New Contractor/Vendor', 'New Student/Intern', 'Change to existing user'
    ];
  </code></pre>
  <p>I'm able to make a simple drop down list and get the value quite easily:</p>
  <pre><code>&lt;select class=&quot;md-col-6 numberEight&quot; [(ngModel)]=&quot;model.accessType&quot;&gt;
    &lt;option *ngFor=&quot;let item of accessTypes&quot; [value]=&quot;item&quot;&gt;{{item}}&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  <p>But when I try to use the mat-select the css from the example is not applied and the list options appear all the way at the bottom of the screen:</p>
  <pre><code>    &lt;div class=&quot;question&quot;&gt;
        &lt;div class=&quot;row&quot;&gt;
          &lt;h5&gt;8. Type of Access Request&lt;/h5&gt;&lt;p class=&quot;required&quot;&gt;*&lt;/p&gt;
        &lt;/div&gt;
  
        &lt;div class=&quot;col-md-6&quot;&gt;
          &lt;mat-form-field appearance=&quot;fill&quot;&gt;
            &lt;mat-label&gt;Access Types&lt;/mat-label&gt;
            &lt;mat-select [(ngModel)]=&quot;model.accessType&quot;&gt;
              &lt;mat-option *ngFor=&quot;let item of accessTypes&quot; [value]=&quot;item&quot;&gt;
                {{item}}
              &lt;/mat-option&gt;
            &lt;/mat-select&gt;
          &lt;/mat-form-field&gt;
        &lt;/div&gt;
        
      &lt;/div&gt;
  </code></pre>
  <p>This is what it looks like:</p>
  <p><a href="https://i.stack.imgur.com/FKRgl.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FKRgl.jpg" alt="dropdown" /></a></p>
  <p>And then all the way at the bottom of the page the list options appear:</p>
  <p><a href="https://i.stack.imgur.com/G03Nz.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G03Nz.jpg" alt="list" /></a></p>
  <p>There is no styling at all in my css file that affects anything in the select field. Class <code>question</code> has no styling and <code>required</code> just makes the * red.</p>
  <p>Even when I do this in a completely new component with an html file including only:</p>
  <pre><code>&lt;mat-form-field appearance=&quot;fill&quot;&gt;
    &lt;mat-label&gt;Access Types&lt;/mat-label&gt;
    &lt;mat-select [(ngModel)]=&quot;this.accessTypes&quot; placeholder=&quot;Choose...&quot;&gt;
      &lt;mat-option *ngFor=&quot;let item of accessTypes&quot; [value]=&quot;item&quot;&gt;
        {{item}}
      &lt;/mat-option&gt;
    &lt;/mat-select&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  <p>It behaves the same.</p>
  <p>So why is this happening? Why does the list not appear as it does in the example ?Does the example exclude some styling that is necessary?</p>
  <p>I found this similar question: <a href="https://stackoverflow.com/questions/52189112/mat-select-appears-in-the-bottom-of-the-page">Mat Select appears in the bottom of the page</a> and tried adding <code>@import &quot;~@angular/material/prebuilt-themes/indigo-pink.css&quot;;</code> to the pages css file but this did not fix the problem.</p>
  <p>I have</p>
  <pre><code>import {MatSelectModule} from '@angular/material/select';
  import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
  </code></pre>
  <p>I also am including in package.json:</p>
  <pre><code>&quot;@ng-bootstrap/ng-bootstrap&quot;: &quot;^9.1.0&quot;,
  &quot;bootstrap&quot;: &quot;^4.5.0&quot;,
  </code></pre>
  <p>and in angular.json I include in styles:</p>
  <pre><code> &quot;styles&quot;: [
                &quot;node_modules/bootstrap/dist/css/bootstrap.css&quot;,
                &quot;src/styles.css&quot;
              ],
  </code></pre>
  <p>and in scripts:</p>
  <pre><code>&quot;scripts&quot;: [
                &quot;node_modules/jquery/dist/jquery.min.js&quot;,
                &quot;node_modules/bootstrap/dist/js/bootstrap.js&quot;
              ]
  </code></pre>
  <p>In my app module. Do I need anything else/are these wrong? Is the bootstrap I already have somehow affecting the style of the select list?</p>
  <p>I can't share the entire html page because it makes the question too long, but if you need anything else please let me know.</p>