[Angular] How to change height in mat-form-field

From material v15, component density was introduced, offering a convenient way to customize components without the need for ::ng-deep and style overrides.

Here's an example taken from the documentation:

        
            
            $dark-theme: mat.define-dark-theme((
              color: ...,
              typography: ...,
              density: -1, // default is 0
            ));

            
            .the-dense-zone {
              @include mat.button-density(-2);
            }
        
    

how we can use the density setting in Angular Material themes to adjust the spacing and size of components, by setting a density value in the theme, we can apply it to all components uniformly. Alternatively, we can selectively apply the density using Sass mixins to specific parts of our application.

Utilizing the density feature allows for consistent and efficient customization of component appearance and spacing across the application. It promotes maintainability and scalability by providing a centralized way to manage component density without complex CSS overrides or ::ng-deep selectors.

If we want to change the height of a mat-form-field in Angular Material, we can achieve this by applying custom CSS to the mat-form-field element.

Let's say we want to increase the height of the mat-form-field. We can do this by targeting the mat-form-field and adjusting its height using CSS.

            /* Add custom CSS to increase the height of mat-form-field */
            .custom-mat-form-field {
                height: 60px; /* Adjust the height value as per your requirement */
            }
        
    

In component's HTML file, apply the custom class to the mat-form-field element:

  <!--Apply the custom class to mat-form-field-->
            <mat-form-field class="custom-mat-form-field">
                <!--Your form field input or textarea goes here-->
            </mat-form-field>

By adding the custom CSS class to the mat-form-field, we can change its height to the desired value. Adjust the height value in the CSS class according to your specific requirements.

2 We have a couple of options for changing the appearance or size of mat-form-field in Angular Material.

First, we can directly apply inline styles to the mat-form-field element. For example:

        
            
                Name
                
            
        
    

Approach allows us to specify styles directly within the HTML, making it convenient for quick adjustments. if we need to apply the same styles across multiple form fields, we can use CSS to target the mat-form-field element and apply styles globally or within a specific component's stylesheet. For example:

        
            /* Apply CSS to change the size of mat-form-field */
            mat-form-field {
                font-size: 20px;
            }
        
    

By using CSS, we can achieve consistent styling across our application and make changes more easily by modifying the stylesheet. 

3 We found that this CSS solution worked well for us. By targeting specific classes related to mat-form-field in Angular Material, we were able to adjust the padding and minimum height to achieve the desired appearance.

Here's the CSS code that we used:

        
            /* Adjust padding for outlined text fields */
            .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix {
                padding-top: 5px !important;
                padding-bottom: 5px !important;
            }
            
            /* Set minimum height for form field infix */
            .mat-mdc-form-field-infix {
                min-height: 15px !important;
            }
        
    

This CSS targets specific classes related to the appearance of mat-form-field, allowing us to fine-tune the padding and minimum height. We used the "!important" declaration to ensure that our styles override any existing styles applied by Angular Material.