CODEWITHSUNDEEP
cssangulartypescriptionic-frameworkionic3
Morad Edwar
Morad Edwar

Reputation: 1050

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.

Upvotes: 2

Views: 8596

Answers (3)

Gurvinder Singh
Gurvinder Singh

Reputation: 41

Change in the AndroidManifest.xml file did the trick for me. android:windowSoftInputMode="adjustPan"

Upvotes: 4

Morad Edwar
Morad Edwar

Reputation: 1050

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

Upvotes: 2

Sampath
Sampath

Reputation: 65870

Yes, You can avoid this issue by using Ionic grid.You need to set CSS as shown below.

your-page.scss 

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

Upvotes: 1

Related Questions