时间戳

首页 > 解决方案 > 谷歌自动完成下拉位置问题

css - 谷歌自动完成下拉位置问题

问题描述

我在我的 Angular 应用程序中使用NgxAutocomPlace模块，以下模块通过生成.pac-container显示自动完成结果的方式与谷歌自动完成 API 一起使用。

问题是，在移动设备上，下拉菜单位于输入的上方而不是下方，并且对于最终用户来说是不可用的，它看起来像这样：

在此处输入图像描述

这是我的代码的样子：

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

有没有办法在下面设置该下拉菜单的位置<input>？

编辑1：

当虚拟键盘启动时，问题发生在滚动或移动设备上，因此问题是触发时设置为 pac-container 的位置

编辑2：

我正在尝试在地址更改和滚动时执行类似的操作，但即使这样也没有任何效果：

 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;
  }

其中 indirizzo 是放置输入的 Div。

编辑 3：

.pac-container 是在下面生成的，<body>所以我认为通过强制它在下面呈现<div class="indirizzo">将解决问题......

编辑4：

通过将顶部设置为pac -container 到从屏幕顶部到输入底部的 X 像素的固定位置来解决，但仍在寻找更好的解决方案。

（所以从我输入的顶部 0 到末尾，我刚刚设置了 465px .pac-container top: 465px）但是在某些屏幕上，高度可能会更低（一些移动设备 450 其他 460 其他 470）下拉菜单仍然绘制得很糟糕。

标签： cssangulargoogle-places-api

解决方案

如果您使用的是 Angular 材料，这将有所帮助

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

如果您使用的是 Bootstrap，这将对您有所帮助。

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

推荐阅读