鍵盤將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向上推出屏幕

回答

相關問題