text display on bottom when use angular material autocomplete text box?
I work on angular 9 I face issue on angular material auto complete
issue is when select Item from auto complete angular
text display on bottom of page .
and angular autocomplete text box is on header
the text display correctly but is so far from control text box
<div class="col-sm-3 form-group" >
<label class="control-label col-lg-8">Select Item</label>
<mat-form-field >
<input type="text" placeholder="Select Item" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto" class="form-control">
<mat-autocomplete #auto="matAutocomplete" [panelWidth]="auto">
<mat-option (click)="getselected(exp.itemName,i+1,exp.id)" *ngFor="let exp of this.filteredOptions | async;let i = index" [value]="exp.itemName">
{{exp.itemName}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
issue as image below : text is so far issue