In Angular 15, how can I decrease the size of a Form Field?

Question

I'm trying to reduce the size of a Form Field and font in Angular 15 as simply as possible. In the middle of an upgrade to 15 from 13 and the existing UI is quite broken.

HTML

<div class="example-container">
  <mat-form-field appearance="outline">
    <mat-label>Select me long text end with ellipse</mat-label>
    <mat-select>
      <mat-option value="option">Option</mat-option>
    </mat-select>
  </mat-form-field>
</div>

CSS

mat-form-field {
  width:150px;
}

.mat-mdc-text-field-wrapper {
  height: 30px;
}

When I adjust the size with those selectors in Google Dev Tools, it works - but it didn't in Stackblitz. However, even if the size decreases, the mat-label text is out of the box and not centered. I've messed with the padding and a bunch of other things, but I can't get it to work.

Is there a simple solution to scale it down to a smaller size?

Image of what's going on

Answer 1

here is my solution:

<mat-form-field style="font-size: 12px" appearance="outline">
  <mat-label>Name</mat-label>
  <input matInput placeholder="Name..." autocomplete="off"/>
</mat-form-field>

Answer 2

You can change the size of form field tag by applying css on the tag

mat-form-field { }

Answer 3

Although ng-deep is technically deprecated, I use the below code to change the height of the new MDC Angular Material Form Fields.

::ng-deep .mat-mdc-text-field-wrapper {
  max-height: 20px;
}

::ng-deep .mat-mdc-form-field {
  max-height: 30px;
}

::ng-deep .mat-mdc-form-field-infix {
  padding: 0 !important;
}

A short explanation what the classes are used for in this example:

.mat-mdc-text-field-wrapper

Is used for the text size inside the form field. Leaving this untouched will render the text outside of the resized form field.

.mat-mdc-form-field

Is used for the actual size of the form field.

.mat-mdc-form-field-infix

Is used to remove the padding. Not changing this will push the input away from the form field. Don't forget the !important property here.

You will need to play around with all three to get a set of values that works for your case.