键盘向上推动一个 div &走出屏幕

2022-01-21 00:00:00 css ionic-framework ionic3 angular typescript

我正在使用 Ionic 3 创建一个网站，该网站将成为 web 视图中另一个本机应用程序的一部分，因此我不使用 cordova 或任何本机插件.我有一个在元素上方嵌入 Google 地图视图的表单，这是我的 HTML:

这是我的 CSS:

 #map_loader {边距:自动；背景颜色:rgba(0, 0, 0, 0.5);宽度:100%；高度:100%；z 指数:1000；位置:绝对；}.滚动内容{最高:38%；位置:绝对；边距顶部:32px；}

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

我做得对吗?这是因为我的 CSS 造成的吗?让 div 占据屏幕高度的特定百分比的最佳方法是什么?我试过 ion-grid 但它似乎无法帮助我解决这种情况.

解决方案

这是 ionic 中的错误，一旦你专注于任何输入，键盘就会出现并为 添加 padding-bottom>scroll-content 类将 for 提升到键盘上方，并且在关闭键盘后它不会删除 padding-bottom.我试图检查移动键盘上是否有任何 JS 事件，但我们没有，所以我的解决方法是为 scroll-content 设置一个固定的 padding-bottom类以防止在运行时更改它.

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

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>

and here is my 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;
  }

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.

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.

解决方案

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

相关文章