cssangularangular-materialchips

How shall I adjust the size of mat-form-field mat-chip?


This is the output of my html code enter image description here

I want to make the size of mat-chip form field even as the above form-field.

This is location from where I used chips..I want to decrease the size of the chip mat-form.


Solution

  • You can override the styles from angular/material.

    In this case, it is enough to simply add the same property in a style rule in your component's CSS file. Your component CSS has higher specificity than the mat-chip rules below.

    The height of the chip is determined by the following rule:

    .mat-standard-chip {
       min-height: 32px;
    }
    

    So you could override this to make the chip smaller.

    You may also want to modify the font-size with the following rule:

    .mat-chip {
       font-size: 14px;
    }