键盘将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，但它似乎无法帮助我解决这个问题。

来源

2017-11-11 Morad Edwar

它在离子错误，一旦你专注于任何输入，键盘会显示出来，并会增加padding-bottom为scroll-content类解除了键盘上方，它在关闭键盘后不会删除padding-bottom。我试着检查手机键盘上是否有JS事件，但我们不这样做的目的是为scroll-content类设置固定的padding-bottom，以防止在运行时更改它。

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

来源

2017-11-14 04:05:55

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

您-page.scss

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

来源

2017-11-11 15:37:20 Sampath

所以我必须把所有东西都放在一个“离子格子”中？像一个容器？ –

是的，你需要这样做。 – Sampath

键盘将div向上推出屏幕

回答

相关问题