htmlcssangularangular-materialmat-form-field

Angular 12- The mat-form-field goes out of the search-bar

I was making a search-bar and put a mat-autocomplete in the mat-form-field. The input field goes out of the bounds of the search-bar like thisenter image description here

This is the code HTML:

<div class="search-bar">
    <mat-icon>search</mat-icon>
    <form class="example-form">
        <mat-form-field class="example-full-width" appearance="fill">
          <input type="text"
                placeholder="Search for a food item ..."
                matInput
                [formControl]="myControl"
                [matAutocomplete]="auto">
          <mat-autocomplete #auto="matAutocomplete">
            <mat-option *ngFor="let option of options" [value]="option">
              {{option}}
            </mat-option>
          </mat-autocomplete>
        </mat-form-field>
      </form>
</div>

CSS:

.search-bar{
    background-color: #ffffff;
    height: 40px;
    border-radius: 20px;
    display: flex;
    padding: 10px;
    min-width: fit-content;
    width: max-content;
}
.example-form{
    background: #ffffff;
    outline: none;
    border-style: none;
    width: 30rem;
    font-size: 1.2rem;
    width: max-content;
}

input{
    height: 2rem;
}

How do I change the height of the mat-form-field? Thanks in advance

Solution

  • If you want to know how you can change the height of the mat-form-field (No offense just if you didn't know). You could try the following.

    mat-form-field {
 height: 20px;
}

    I would recommend you to use the Developer Tools in your browser to find the element. The one that is pushing down the mat-autocomplete and then change the css properties of the affecting class. As it is obvious, that it shouldn't be that way as shown in your screenshot.