Mat Chip List opon selection expands input

user_16017333 0
Viewed 61

Giving the default behavior, when value is selected from a dropdown, MatChip appears within the input, but also expands it. I am a bit surprised this is the default behavior. Anyone can suggest how they fix it? Providing a forked StackBlitz demo (source take from Angular Material documentation):

DEMO

You can see in the images bellow - when chip selected, input becomes taller.

enter image description here enter image description here

angular-material angular typescript css javascript
1 Answers

Problem

The problem is mat-form-field-infix class. When there are chips in the input, they increase the height.

Solution

You can set the minimal height for that class to be the same as when there are chips in the input. You can do it in the CSS file like this:

::ng-deep .mat-form-field-infix {
  min-height: 32px;
}

Working example

user_143898300
Related