Ionic-framework: Keyboard causes the page to move up.

[viest]

Ionic version: (check one with "x")
[x] 3.9.2

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request

Current behavior:
Input pops up the keyboard, and the page moves up causing the header to be half behind the status bar.

Expected behavior:
Popup keyboard, the page does not have redundant movement.

Related code:

app.module.ts

IonicModule.forRoot(MyApp, {
      scrollPadding: false,
      scrollAssist: true,
      autoFocusAssist: false
})

app.component.ts

statusBar.styleDefault();
statusBar.overlaysWebView(true);
statusBar.backgroundColorByHexString('#bdbdbd');

keyboard.hideKeyboardAccessoryBar(false);

splashScreen.hide();

config.xml

<platform name="android">
    <preference name="Fullscreen" value="False" />
    <custom-preference name="android-manifest/application/activity/@android:windowSoftInputMode" value="adjustPan" />
</platform>

Ionic info:

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.1
    ionic (Ionic CLI) : 3.19.1

global packages:

    cordova (Cordova CLI) : 8.0.0

local packages:

    @ionic/app-scripts : 3.1.8
    Cordova Platforms  : android 7.0.0
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.0.1
    Node              : v8.9.1
    npm               : 5.6.0
    OS                : macOS Sierra
    Xcode             : Xcode 8.2.1 Build version 8C1002

Environment Variables:

    ANDROID_HOME : /Users/vikin/Library/Android/sdk

Misc:

    backend : pro

[sjregan]

I have the same issue, I have gotten around it by using the 'cordova-plugin-ionic-keyboard' package rather than the 'ionic-plugin-keyboard' referenced in the documentation. Using the different library also resolved a lot of the issues I had with input elements losing focus immediately after getting focus.

[viest]

@sjregan Hi sjregan, my issue is been solved!

This issue’s reason is statusBar top's blank, so keyboard pops up, there is no support.

code:

app.scss

.platform-android {
    ion-header {
      padding-top: $cordova-md-statusbar-padding;
    }
}

I hope I can help you!

[candy4290]

i have solved it by add IonicModule.forRoot(MyApp, {
scrollPadding: false,
scrollAssist: true,
autoFocusAssist: false
}), in app.module.

[matejkramny]

Try installing the ionic wkwebview plugin. It fixes the issue

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.