I want to change the height of the mat-form-field in Angular 16

61 views Asked by At
HTML
<mat-form-field appearance="fill" class="height-adjustment1">
  <mat-label>Fill form field</mat-label>
  <input matInput placeholder="Placeholder" />
  <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
  <mat-hint>Hint</mat-hint>
</mat-form-field>
<mat-form-field appearance="outline" class="height-adjustment2">
  <mat-label>Outline form field</mat-label>
  <input matInput placeholder="Placeholder" />
  <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
  <mat-hint>Hint</mat-hint>
</mat-form-field>

SCSS
.height-adjustment1 {
  height: 70px;
}
.height-adjustment2 {
  height: 100px;
}

I am trying to reduce the height of the mat-form-field with the class "height-adjustment2". if the appearence is fill it will work if the appearence is outline then it is not working.

0

There are 0 answers