Search code examples
cssangularangular-material

How to reduce the height of a mat field that contains a mat-select?

How to reduce the height of a mat field that contains a mat-select?

Angular v15 is used.

The code is the from material components doc, no modifications. Just a default table and default outline formfield.

  <mat-form-field appearance="outline">
      <mat-select>
        @for (food of foods; track food) {
          <mat-option [value]="food.value">{{ food.viewValue }}</mat-option>
        }
      </mat-select>
  </mat-form-field>

enter image description here

What I try to achieve is somthing like this. (pls ignore the cut of text) enter image description here

Solution

  • You just need to adjust the CSS ensuring you have a Class defined, so that the styles do not affect other selects!

    .custom-form-field .mat-mdc-text-field-wrapper {
  height: 30px !important;
}

.custom-form-field [matformfieldfloatinglabel] {
  top: 13px !important;
}

.custom-form-field .mat-mdc-form-field-infix {
  padding: 0px !important;
}

.mdc-floating-label--float-above {
  transform: translate(-3px, -25px) !important;
  scale: 0.74 !important;
}

.custom-form-field .mat-mdc-input-element {
  padding-top: 3px !important;
}

    html

    ...
<ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef>Symbol</th>
    <td mat-cell *matCellDef="let element">
      <mat-form-field
        appearance="outline"
        class="no-bottom-space custom-form-field"
      >
        <mat-label>Outline form field</mat-label>
        <input matInput placeholder="Placeholder" />
      </mat-form-field>
    </td>
  </ng-container>
  ...

    stackblitz