键盘将div推入&屏幕外 [英] The keyboard pushes a div up & out of the screen

问题描述

我正在使用Ionic 3制作一个网站，该网站将成为Webview中另一个本机应用程序的一部分，因此我不使用cordova或任何本机插件. 我在元素上方有一个带有嵌入式Google Map View的表单，这是我的HTML:

I'm using Ionic 3 to make a website which will be part of another native app in a webview so I don't user cordova or any native plugins. I have a form with an embedded Google Map View above the elements and here is my 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;
  }

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

Now once the user open the website on his phone and start filling the form the keyboard shifts the map out of the screen ( Up ) and it stays that way and a blank empty space shows bellow the form.

我做对了吗?这是因为我的CSS导致的吗?并使div占据屏幕高度的特定百分比的最佳方法是什么?我尝试了ion-grid，但在这种情况下似乎无济于事.

Am I doing it right? Is that happening because of my CSS? and what is the best way to make a div takes a specific percentage of the screen height? I tried ion-grid but it seems that it can't help me for this case.

推荐答案

这是离子类中的错误，一旦您专注于任何输入，键盘就会显示出来，并将为scroll-content类添加padding-bottom，以解决上述问题键盘，并且在关闭键盘后它不会移除padding-bottom. 我试图检查移动键盘上是否有任何JS事件，但我们没有这样做，因此我的解决方法是为scroll-content类设置一个固定的padding-bottom，以防止在运行时对其进行更改.

it's bug in ionic, once you focus on any input the keyboard will show up and will add padding-bottom for the scroll-content class to lift the for above the keyboard and it doesn't remove the padding-bottom after you close the keyboard. I tried to check if I have any JS event on the mobile keyboard but we don't so my work around is to set a fixed padding-bottom for the scroll-content class to prevent changing it on the runtime.

.scroll-content {
    padding-bottom: 0 !important;
 }

这篇关于键盘将div推入&屏幕外的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！