Question

我正在使用Ionic 3创建一个网站，该网站将成为webview中另一个本机应用程序的一部分，因此我不会使用cordova或任何本机插件。我有一个在元素上方嵌入了Google Map View的表单，这是我的HTML：

<div  style="height: 40%; width: 100%">
  <div id="map_loader" *ngIf="showMapLoader">
    <div class="sk-wave">
      <div class="sk-rect sk-rect1"></div>
      <div class="sk-rect sk-rect2"></div>
      <div class="sk-rect sk-rect3"></div>
      <div class="sk-rect sk-rect4"></div>
      <div class="sk-rect sk-rect5"></div>
    </div>
  </div>
  <div #mapCanvas style="width: 100%; height: 100%;"></div>
</div>
<form (ngSubmit)="submit()" padding>
  <ion-list>
......
......
.....
  </ion-list>
</form>

这是我的CSS：

  #map_loader {
    margin:auto;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    z-index: 1000;
    position: absolute;
  }

  .scroll-content {
    top: 38%;
    position: absolute;
    margin-top: 32px;
  }

现在，一旦用户在手机上打开网站并开始填写表格，键盘就会将地图移出屏幕（向上）并保持这种状态，并且表格下方会显示一个空白空白区域。

我做得对吗？这是因为我的CSS吗？什么是制作div的最佳方法是占用屏幕高度的特定百分比？我试过了ion-grid，但似乎对这种情况无能为力。

Answer 1

它是离子的错误，一旦你专注于键盘将显示的任何输入，并将为padding-bottom类添加scroll-content以提升键盘上方的for并且它不会删除{关闭键盘后{1}}。我尝试检查移动键盘上是否有任何JS事件，但我们不这样做，我的工作是为padding-bottom类设置一个固定的padding-bottom，以防止在运行时更改它。 / p>

scroll-content

Answer 2

是的，您可以使用Ionic grid来避免此问题。您需要设置CSS，如下所示。

your-page.scss

  ion-grid {
      min-height: 100%;
  }

Answer 3

AndroidManifest.xml文件中的更改对我有用。 DEF

键盘推动了一个div和＆amp;离开屏幕

3 个答案: