Menu
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:
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..
215
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
