Angular Material Select styling not behaving correctly

Issue

I am following this example of using a material select field: https://material.angular.io/components/select/overview

I have this list in my ts file:

  accessTypes: string[] = [
    'New Employee', 'Rehire', 'New Provider', 'New Resident/Fellow', 'Transfer/Job Title Change',
    'New Contractor/Vendor', 'New Student/Intern', 'Change to existing user'
  ];

I'm able to make a simple drop down list and get the value quite easily:

<select class="md-col-6 numberEight" [(ngModel)]="model.accessType">
  <option *ngFor="let item of accessTypes" [value]="item">{{item}}</option>
</select>

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:

    <div class="question">
      <div class="row">
        <h5>8. Type of Access Request</h5><p class="required">*</p>
      </div>

      <div class="col-md-6">
        <mat-form-field appearance="fill">
          <mat-label>Access Types</mat-label>
          <mat-select [(ngModel)]="model.accessType">
            <mat-option *ngFor="let item of accessTypes" [value]="item">
              {{item}}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>
      
    </div>

This is what it looks like:

And then all the way at the bottom of the page the list options appear:

There is no styling at all in my css file that affects anything in the select field. Class question has no styling and required just makes the * red.

Even when I do this in a completely new component with an html file including only:

<mat-form-field appearance="fill">
  <mat-label>Access Types</mat-label>
  <mat-select [(ngModel)]="this.accessTypes" placeholder="Choose...">
    <mat-option *ngFor="let item of accessTypes" [value]="item">
      {{item}}
    </mat-option>
  </mat-select>
</mat-form-field>

It behaves the same.

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?

I found this similar question: Mat Select appears in the bottom of the page and tried adding @import "~@angular/material/prebuilt-themes/indigo-pink.css"; to the pages css file but this did not fix the problem.

I have

import {MatSelectModule} from '@angular/material/select';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

I also am including in package.json:

"@ng-bootstrap/ng-bootstrap": "^9.1.0",
"bootstrap": "^4.5.0",

and in angular.json I include in styles:

 "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.css",
              "src/styles.css"
            ],

and in scripts:

"scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.js"
            ]

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?

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.

Solution

You code seems to be working properly in my test project, and your imports look correct. You may have something overriding the material select styling, or something is missing in your angular material structure. The use of class="col-md-6" tells me that you are using some sort styling bootstrap framework?

Update:

I spun up a new project specifying .css only, and it looks like I was able to reproduce the issue. It appears that you are indeed missing the material theme structure. I added the @import "~@angular/material/prebuilt-themes/indigo-pink.css"; to the styles.css file and it fixed the problem.

styles.css file:

/* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";


html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

Answered By - xJSx