Google autocomplete dropdown position issue

3
votes

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>?

EDIT 1:

The issue happens on scroll or in mobile devices as the virtual keyboard is up, so the problem is the position set to pac-container when is triggered

EDIT 2:

I'm trying to do something like this on Address change and on scroll but even this doesn't have any effect:

 const top = this.indirizzo.nativeElement.getBoundingClientRect().top ;
  const pacContainer = document.querySelector('.pac-container') as HTMLElement;
  if (pacContainer) {
    console.log(window.scrollY + top + 60);
    pacContainer.style.top = window.scrollY + top + 60;
  }

Where indirizzo is Div where input is placed.

EDIT 3:

the .pac-container is generated under <body> so i think by forcing it be rendered under <div class="indirizzo"> will solve the issue...

EDIT 4:

SOLVED by setting top to pac-container to fixed position of X pixel from top of the screen to bottom of input, but still looking for a better solution.

(so as from top 0 to end of my input there are 465px i just set .pac-container top: 465px) but as on some screens that height could be lower (some mobile 450 some other 460 other 470) the dropdown is still drawn badly..

3
cssangulargoogle-places-api
Generally, z-index should resolve your issue. Can you help us with your working code pen or snippet with CSS and Google API import? - Dhruvi Makvana
@DhruviMakvana i'm unable to make a working example via stackblitz, actually there is no custom CSS i'm just using ng-bootstrap.github.io for styling and this library for autocomplete npmjs.com/package/ngx-autocom-place - NiceToMytyuk
@DhruviMakvana yet tryed with z-index it had no effect.. - NiceToMytyuk

3 Answers

1
votes

If you are using Angular material this will help

.pac-container {
    z-index: 100000;
}

If you are using Bootstrap, this will help you.

::ng-deep .pac-container {
  z-index: 100000;
}
0
votes

Perhaps something like this when the elements have loaded could solve the problem.

const pacContainer = document.querySelector('.pac-container') as HTMLElement;
const body = document.body as HTMLElement;
const indirizzo = document.querySelector('.indirizzo') as HTMLElement;
const clone = pacContainer.cloneNode(true);
indirizzo.appendChild(clone);
body.removeChild(pacContainer);

.pac-container CSS should contain position: relative.

0
votes

I also experienced such issue with bootstrap and angular material ui. With these 2 cases, I used the following css.

html {
    height: 100%;
    min-height: 100%;
}