title: Adjusting height of mat-form-field Angular Material
body: <p>I am running into an issue with a simple adjust of a mat-form-field that holds my autocomplete input. From the image you can see if it's outside the mat-toolbar height, but I have not found a simple way to adjust the height of the entire input so it can stay inside the toolbar area. Width works fine. Height does not.</p>
  
  <p><a href="https://i.stack.imgur.com/foZa2.png" rel="nofollow noreferrer">input outside toolbar</a></p>
  
  <p><a href="https://i.stack.imgur.com/X0WRp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X0WRp.png" alt="enter image description here"></a></p>
  
  <p>My html code is as follows: </p>
  
  <pre><code> &lt;mat-toolbar  &gt;
        &lt;span style="width:200px"&gt;Test&lt;/span&gt;
           &lt;label&gt;{{prodPointId}}&lt;/label&gt;
          &lt;form class="example-form"  &gt;
              &lt;mat-form-field  appearance="outline"  margin=" 10px" class="example-full-width searchField" &gt;
                  &lt;mat-label&gt;Search...&lt;/mat-label&gt;
  
                &lt;input type="text"   matInput [formControl]="myControl" [matAutocomplete]="auto" [(ngModel)]="value" &gt;
                &lt;button mat-button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="value=''"&gt;
                    &lt;mat-icon&gt;close&lt;/mat-icon&gt;
                  &lt;/button&gt;
                &lt;mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn"&gt;
                  &lt;mat-option  
                      *ngFor="let option of filteredOptions | async" 
                      [value]="option.prodPointName" 
                      (click)="pointSelected(option.prodPointId)" 
                      [routerLink]="['/coredata', option.prodPointId]" &gt;
                      &lt;mat-icon&gt;home&lt;/mat-icon&gt;
                      {{option.prodPointCode}} : {{option.prodPointName}} 
                  &lt;/mat-option&gt;
                &lt;/mat-autocomplete&gt;              
              &lt;/mat-form-field&gt;
            &lt;/form&gt;                  
    &lt;/mat-toolbar&gt;
  </code></pre>
  
  <p>When I pull up chrome dev tools I attempted to adjust the height in the CSS for the component using div.mat-form-field and several other options, but nothing has seemed to work. Looking at the documentation at Angular Material, I haven't found anything that shows me how to control this simple styling adjustment. What am I missing. Is it so simple and I just overthinking it? Thanks!</p>