format the default behavior of drop down in <mat-select> angular material

Question

I am using angular-material select feature to create a multi-select drop down using and . The inbuilt code opens the drop-box on top of the select box. My implementation requires that the user should be able to see the values in the box while they are being selected(The box should open exactly below the display box). I tried over-riding the "transform-origin" and "transform" property in the .mat-select-panel class but somehow the changes are not getting applied.Can some help me on how can this property be adjusted.

code: '

<div>
 <mat-form-field panelClass="dropdown-border">
 <mat-select  [formControl]="selectValues" [multiple]="!multiSelectOptio disableRipple>
  <mat-option *ngFor="let option of comboBoxData.data " [value]="option">{{option}}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>

Answer 1

You can use a workaround to achieve what you want: declare a <mat-optgroup> inside your <mat-select> and pass as label the title of your select box. This way, once the drop-box is open, it's going to have a header title that will show the select title.

<div>
 <mat-form-field panelClass="dropdown-border">
   <mat-select  [formControl]="selectValues" [multiple]="!multiSelectOptio disableRipple>
     <mat-optgroup label="Something"></mat-optgroup>
     <mat-option *ngFor="let option of comboBoxData.data " [value]="option">{{option}}
     </mat-option>
   </mat-select>
 </mat-form-field>
</div>

Working example here