谷歌自动完成下拉位置问题答案

【问题标题】：Google autocomplete dropdown position issue谷歌自动完成下拉位置问题
【发布时间】：2020-10-27 15:48:28
【问题描述】：

我在我的 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：

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

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

【问题讨论】：

通常，z-index 应该可以解决您的问题。你能帮助我们使用 CSS 和 Google API 导入的工作代码笔或 sn-p 吗？
@DhruviMakvana 我无法通过 stackblitz 制作一个工作示例，实际上没有自定义 CSS，我只是使用 ng-bootstrap.github.io 进行样式设置和这个库用于自动完成 npmjs.com/package/ngx-autocom-place
@DhruviMakvana 尝试使用 z-index 没有效果..

标签： css angular google-places-api

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

当元素加载完毕后，也许这样的事情可以解决问题。

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 应该包含position: relative。

【讨论】：

我应该把它放在输入文本(change) 方法中，因为当文本更改时会生成.pac-container，如果输入失去焦点，它会从正文中删除它？
@IgorMytyuk 它完全删除了元素并重新创建它？我认为简单地隐藏自动完成容器 div 就足够了。检查元素被销毁时是否在控制台中出现任何错误。另外上面的sn-p也应该放在onFocus或者onChange事件中。

【解决方案3】：

我在 bootstrap 和 angular material ui 方面也遇到过这样的问题。对于这两种情况，我使用了以下 css。

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

【讨论】：

【解决方案4】：

试试这个：

/deep/ .pack-container{
  z-index: 10000 !important;
  position: fixed !important;
}

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。