键盘将div向上推出屏幕
问题描述:
我正在使用Ionic 3创建一个网站,该网站将成为webview中另一个本地应用程序的一部分,因此我不使用cordova或任何原生插件。 我有一个嵌入谷歌地图视图元素之上的形式,这里是我的HTML:键盘将div向上推出屏幕
<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
,但它似乎无法帮助我解决这个问题。
答
它在离子错误,一旦你专注于任何输入,键盘会显示出来,并会增加padding-bottom
为scroll-content
类解除了键盘上方,它在关闭键盘后不会删除padding-bottom
。 我试着检查手机键盘上是否有JS事件,但我们不这样做的目的是为scroll-content
类设置固定的padding-bottom
,以防止在运行时更改它。
.scroll-content {
padding-bottom: 0 !important;
}
所以我必须把所有东西都放在一个“离子格子”中?像一个容器? –
是的,你需要这样做。 – Sampath