Changing the height of an Angular 17 Material Select Field?

Question

In this demo I'd like to reduce the height of the select field. This is the markup.

<mat-form-field appearance="outline">
  <mat-label>Toppings</mat-label>
  <mat-select [formControl]="toppings" multiple>
    <mat-select-trigger>
      {{toppings.value?.[0] || ''}} @if ((toppings.value?.length || 0) > 1) {
      <span class="example-additional-selection">
        (+{{(toppings.value?.length || 0) - 1}} {{toppings.value?.length === 2 ?
        'other' : 'others'}})
      </span>
      }
    </mat-select-trigger>
    @for (topping of toppingList; track topping) {
    <mat-option [value]="topping">{{topping}}</mat-option>
    }
  </mat-select>
</mat-form-field>

If we go into developer tooling and select the div with the class mat-mdc-form-field-infix we can change the height and the padding, however when the padding is changed it also changes the location of the drop down arrow, so I'm trying to figure out how to keep everything centered while reducing the height.

Thoughts?

Answer 1

Try the following:

.mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix {
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 4%; /*you can tweak around with this, */
    margin-bottom: -15%; /*and this*/
}

/*you also have to adjust the label, after the above*/
.mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label {
    top: 50%;
}
.mdc-floating-label--float-above{
    top: 80% !important;
}