0

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

Frank Einstein
  • 1
  • 1
  • There's density...it's a pain to work with, but probably better than forcing the issue with style overrides. See https://stackoverflow.com/questions/73960501/how-can-i-use-angular-material-density – Andrew Allen Apr 28 '23 at 08:51

2 Answers2

0

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>
sun sreng
  • 587
  • 6
  • 7
0

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

mat-form-field { }

Apurva Pathak
  • 692
  • 1
  • 9
  • 22