ahmed elbarbary

ahmed elbarbary

  • 961
  • 1.5k
  • 106k

text display on bottom when use angular material autocomplete text box

Jul 14 2021 2:40 AM

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