Reduce the height of a mat-form-field in Angular Material

To reduce the height of a mat-form-field in Angular Material, you can use CSS to target the mat-form-field element and set its height property to the desired value. Here’s an example of how to do this:

CSS

.mat-form-field-wrapper {
    padding-top: 0; /* Reduce top padding */
}
.mat-form-field-infix {
    height: 36px; /* Set the desired height */
}
.mat-form-field-label {
    transform: translateY(-40%); /* Adjust label position */
}
.mat-form-field-label mat-label {
    font-size: 12px;
}
.mat-form-field-appearance-outline .mat-form-field-infix {
    padding: 0.4em 0 1em 0;
}

.mat-form-field-appearance-outline .mat-form-field-wrapper {
    margin-bottom: .10em;
}

.mat-form-field-wrapper {
    padding-bottom: 0.94375em;
}

mat-label {
    font-weight: 500;
    font-size: 14px;
    letter-spacing: -0.005em;
    color: #000000;
}

.mat-form-field-appearance-outline .mat-form-field-outline {
    color: #ccc !important;
}
.mat-form-field-appearance-outline .mat-form-field-infix {
    font-size: 12px;
}

HTML

<mat-form-field appearance="outline" class="custom-form-field">
<mat-label>First Name</mat-label>
<input
matInput
placeholder="First Name"
formControlName="First Name"
autocomplete="First Name"
required
/>
</mat-form-field>

For Select

<mat-form-field appearance="outline">
 <mat-label>Favorite food</mat-label>
 <mat-select>
 <mat-option *ngFor="let food of foods" [value]="food.value">
 {{food.viewValue}}
  </mat-option>
 </mat-select>
 </mat-form-field>

.ts

interface Food {
  value: string;
  viewValue: string;
}
@Component({
  selector: 'app-inside',
  templateUrl: './inside.component.html',
  styleUrls: ['./inside.component.scss']
})
export class InsideComponent implements OnInit {
  foods: Food[] = [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos'},
  ];

How to change the default select arrow using CSS?

.mat-select-arrow {
    border: 0 !important;
    position: relative;
    &::before {
        content: "";
        width: 9px;
        height: 6px;
        position: absolute;
        top: 45%;
        right: 0;
        background-image: url('../../img/downArrow.png');
    }
}

Change the default select arrow using Font Awesome.

font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f107";

How to Reduce the height of a mat-form-field?

To reduce the height of a mat-form-field in Angular Material, you can use CSS to target the mat-form-field element and set its height property to the desired value. Here’s an example of how to do this:

cssCopy codemat-form-field {
  height: 40px; /* Set the height to your desired value */
}

You can add this CSS to your component’s stylesheet file, or to your global stylesheet file if you want the change to apply to all mat-form-field elements in your application.

Note that reducing the height of a mat-form-field may cause some of its contents to overflow or become truncated, depending on their size and positioning. You may need to adjust the styles of the field’s contents to ensure that they fit within the smaller height.

This CSS sets the height property of the mat-form-field to 30px and the padding property of the mat-form-field and its wrapper to 0px. It also changes the flex-direction of the mat-form-field-flex element to row-reverse to adjust the input and label position.

This sets the height and padding of the mat-form-field inline with the HTML. Again, you can adjust the values to your desired values.

---

Learn HTML/CSS from W3 School Website

• Angular