I'm currently utilizing the NgxAutocomPlace module within my Angular application. This module interacts with the Google Autocomplete API by generating a .pac-container to display autocomplete suggestions.
However, I'm facing an issue where on mobile devices, the dropdown appears above the input instead of below it, making it difficult for users to interact with. Here is a visual representation of the problem:
https://i.sstatic.net/kZg6j.jpg
Here is a snippet of my code:
<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 specify the position of the dropdown to appear under the <input> field?
EDIT 1:
The issue occurs when scrolling or on mobile devices when the virtual keyboard is active. The problem lies in the positioning of the pac-container when it's triggered.
EDIT 2:
I've attempted to adjust the position of the dropdown on Address change and scroll events, but it doesn't seem to be effective:
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' represents the div where the input is located.
EDIT 3:
The .pac-container is being generated under the <body>, so I believe moving it to be rendered under
<div class="indirizzo">EDIT 4:
SOLVED by setting the top position of the pac-container to a fixed distance from the top of the screen to the bottom of the input field. However, I'm still exploring a more optimal solution.
(For example, setting .pac-container top: 465px based on the height from the top of the screen to the end of the input field, which varies on different screens, leading to a poorly drawn dropdown on some devices.)