The keyboard pushes a div up & out of the screen

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

Thank you very much!

I was having the same issue but i solved it with the following code.

Ionic Info

cli packages: (C:\Users\CISPL-ARNAB BH\AppData\Roaming\npm\node_modules)

@ionic/cli-utils  : 1.9.2
ionic (Ionic CLI) : 3.9.2

global packages:

Cordova CLI : not installed

local packages:

@ionic/app-scripts : 3.1.8
Cordova Platforms  : android 6.3.0 browser 5.0.4
Ionic Framework    : ionic-angular 3.9.2

System:

Node : v8.12.0
npm  : 6.4.1
OS   : Windows 8.1

App Module Code

module

But now i am having the following problem…

2019-01-29%2013_23_14-Themefused 2019-01-29%2013_23_27-Themefused

Cannot click the eye icon when focus is on input.
Any help would be appreciated. Thanks !!!