How to center an Angular Material form field with mat-select inside a table?

Question

How to remove this bottom gap?

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-label>Favorite food</mat-label>
      <mat-select>
        @for (food of foods; track food) {
          <mat-option [value]="food.value">{{ food.viewValue }}</mat-option>
        }
      </mat-select>
  </mat-form-field>

Answer 1

We can use the below CSS and class to do it!

Note: This space is reserved to show validation messages like this field is required so keep this in mind before making the change!

.no-bottom-space .mat-mdc-form-field-subscript-wrapper {
  display: none !important;
}

if you want it to work within the component plz do this

::ng-deep .no-bottom-space .mat-mdc-form-field-subscript-wrapper {
  display: none !important;
}

stackblitz

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">
        <mat-label>Outline form field</mat-label>
        <input matInput placeholder="Placeholder" />
      </mat-form-field>
    </td>
  </ng-container>
  ...

stackblitz