Monday 2 November 2020

Google autocomplete dropdown position issue

I'm using NgxAutocomPlace module in my Angular App, the following module work with google autocomplete API by generating .pac-container in which it shows autocomplete results.

The issue is that on mobile the dropdown goes above instead of below of the input and it's unusable for the final user, it looks like this:

enter image description here

And here is how's my code looks like:

<div class="container-indirizzo mb-3">
  <label>Indirizzo di consegna</label>
  <div class="inside-indirizzo">
      <div class="indirizzo">
        <input
          *ngIf="addressOptions !== null"
          type="text"
          class="form-control"
          required
          placeholder="es. Via Disraeli"
          formControlName="indirizzo"
          ngxAutocomPlace
          [options]="addressOptions"
          (selectedPlace)="addressChange($event)"
        />
      </div>
      <div class="civico" *ngIf="isCivico">
        <input type="text" class="form-control" formControlName="nciv" placeholder="N°" autofocus />
      </div>
  </div>
</div>

Is there a way to set the position of that dropdown under the <input>?



from Google autocomplete dropdown position issue

No comments:

Post a Comment