How To Change Height of mat-form-field in Angular Material?

The default height of the mat-form-field may not always fit your design requirements. To adjust the height of a mat-form-field in Angular Material, you typically need to override some CSS properties.

Prerequisite

• Node NPM
• AngularJS
• JavaScript / TypeScript

Changing Height in mat-form-field

By default, mat-form-field comes with a fixed height. To change the height, you can override the CSS styles of the form field, input and container elements.

<mat-form-field appearance="outline" class="custom-height">
 <mat-label>Enter your name</mat-label>
 <input matInput placeholder="Name" />
</mat-form-field>

Open the component's CSS file (e.g., your-component.component.css).

Apply custom styles to adjust the height. Here’s an example:

.custom-height {
 height: 60px;
 /* Set the height you desire */
}

.custom-height .mat-form-field-wrapper {
 padding-bottom: 0;
 padding-top: 0;
 height: 100%;
}

.custom-height .mat-input-element {
 height: 100%;
 padding-top: 0;
 padding-bottom: 0;
 margin: 0;
 line-height: 60px;
}

/* You can also directly target the element */
mat-form-field {
 height: 150px;
}

Now Let's create a Password validator app with modified mat-form-field height

Steps To Change Height of mat-form-field

We are modifying the height of he form field of Password Validator. To get the complete code follow the article - Password Validation in Angular

Step 1: Implement the view in the app.component.html

Step 2: Styles the form and modify the height of mat-form-field

To start the application, run the following command

ng serve

Output