View does not resize on Android when keyboard opened

[presidentnickson]

When you click on an input on Android, the view is not resizing to account for the keyboard. The view is also unscrollable so you cannot move up nor down the page. If the input you have selected is low down on the page, the keyboard completely covers it and you are unable to see what you are inputting.

I've searched all day to try and find a fix for this - and have been unsuccessful so far.

Using the following almost fixes it : <preference name="resizeOnFullScreen" value="true" />

This makes the view resize and become scrollable when the keyboard is opened. However throughout my app on every other page I lose the ion-tab-bar at the bottom and the ion-header.

Many thanks for any help !

Ionic:

Ionic CLI : 5.2.2 Ionic Framework: @ionic/angular 4.3.1 @angular-devkit/build-angular : 0.13.8 @angular-devkit/schematics : 7.2.4 @angular/cli : 7.3.8 @ionic/angular-toolkit : 1.4.1

Cordova:

Cordova CLI : 8.1.2 (cordova-lib@8.1.1) Cordova Platforms : android 8.0.0, browser 6.0.0 Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.1, (and 16 other plugins)

Utility:

cordova-res : 0.6.0 native-run : 0.2.8

System:

NodeJS : v9.4.0 npm : 6.11.3 OS : Windows 10

[fabianKut90]

I have the same problem and also spent a lot of time following many recent suggestions (setting up scroll in app.module; re-add keyboard, android etc), unfortunately none of them worked.

[thaxy]

This can be easily reproduced:

1) Create a new ionic v3 project with ionic start --type=ionic-angular --cordova 2) Change statusBar.styleDefault(); to statusBar.hide(); (can be found in app.component.ts) 3) Add <preference name="resizeOnFullScreen" value="true" /> to config.xml

Add the following HTML to home.html:

<ion-content>

  <ion-list>
    <ion-item>
      <ion-label floating>user</ion-label>
      <ion-input type="text"></ion-input>
    </ion-item>
    <ion-item>
        <ion-label floating>pass</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>
    <div hidden></div> <!-- hack for https://github.com/ionic-team/ionic/issues/13218 -->
  </ion-list>

  <div padding>
    <p>lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>
    <p><a target="_blank">aasdasdasdasdasd</a></p>
    <p><a target="_blank">asdasdasd</a></p>
    <p><a target="_blank">aasdasdasdasdasd</a></p>
    <p><a target="_blank">asdasdasd</a></p>
    <p><a target="_blank">aasdasdasdasdasd</a></p>
    <p><a target="_blank">asdasdasd</a></p>
    <p><a target="_blank">aasdasdasdasdasd</a></p>
    <p><a target="_blank">asdasdasd</a></p>
    <p><a target="_blank">aasdasdasdasdasd</a></p>
    <p><a target="_blank">asdasdasd</a></p>
    <p><a target="_blank">aasdasdasdasdasd</a></p>
    <p><a target="_blank">asdasdasd</a></p>
    <p>last row</p>
  </div>
</ion-content>

<ion-footer>
  <ion-grid>
    <ion-row>
      <ion-col>
        <button icon-left outline left ion-button color="primary" round>
          <ion-icon name="clipboard"></ion-icon> one
        </button>
      </ion-col>
      <ion-col>
        <button right icon-left ion-button color="primary" round>
          <ion-icon name="create"></ion-icon> two
        </button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-footer>

You will see that the footer is only visible when selecting one of the text inputs. Otherwise the footer wil be only visible for about 15%. The rest is cut off (Moto One Vision Display).

When removing resizeOnFullScreen (step 3) scrolling the content does not work while the keyboard is open.

Update: This is so weird, the docstring of statusBar.styleDefault() seems to be outdated. The project that I am working on explicitly had statusBar.hide() set before. Changing it to .styleDefault() has the desired effect - the statusbar is hidden, scrolling works and the footer is shown. Everything seems to work as expected now.

I think that there may be still a bug within this plugin when the (android) app is in full screen mode.

[danielehrhardt]

Did you ever find a solution?

[lemonforest]

I know this is old and this comment won't be specific to this project but it is showing in Bing search front results; following the Android 12 update on my Pixel 3 XL, this is happening with some existing apps targeting earlier versions.

[Sharavanan7944]

If you don't need fullscreen app, then remove the preference

Try adding the statusBar.overlaysWebView(false) after platform is ready.