How to reduce the size of MatSelect DropDown Panel

Question

I am trying to reduce the default size of mat-select drop-down panel, But unable to figure out how to do it

I have tried giving width , have tried overriding panel class in angular mat-select, But the size doesn't seem to go down

My Template File

    <div class="col-md-8">
       <mat-form-field style="float: right">
          <mat-select panelclass="my-panel" placeholder="Select Course"(selectionChange)="selectCourse($event,courses)" disableOptionCentering>
         <mat-option *ngFor="let course of courses" [value]="course.courseId">
          {{course.courseCode}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>

My Css File

 .my-panel {
   background: orange;
   height: 300px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   min-width: 350px !important;
   }

Expected Result :

Actual Result :

New Issue

Answer 1

You can set the width of mat-select by adding the below css to the main styles.css file.

.mat-form-field-infix{
    width: 80px !important;
}

Change 80px as per your requirement.