Allow Ionic2 keyboard to open without pushing or scrolling content

app.ts

// Minimum viable app.ts pulled from https://github.com/driftyco/ionic2-starter-blank/tree/41b4da8329636a95ab05d2579efd3a1527d2e830
// This snapshot is likely ionic-angular@2.0.0-beta.4 compatable

import 'es6-shim';
import {App, Platform} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {HomePage} from './pages/home/home';

@App({
  template: '<ion-nav [root]="rootPage"></ion-nav>',
  config: {
    // These options are available in ionic-angular@2.0.0-beta.2 and up.
    scrollAssist: false,    // Valid options appear to be [true, false]
    autoFocusAssist: false  // Valid options appear to be ['instant', 'delay', false]
  } // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
  rootPage: any = HomePage;

  constructor(platform: Platform) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      
      if (window.cordova && window.cordova.plugins.Keyboard) {
        // This requires installation of https://github.com/driftyco/ionic-plugin-keyboard
        // and can only affect native compiled Ionic2 apps (not webserved).
        cordova.plugins.Keyboard.disableScroll(true);
      }
    });
  }
}

scrollAssist: false,    // Valid options appear to be [true, false]
autoFocusAssist: false

Finally helped me remove all this keyboard glitches
Thanks!

Thank's man! It helped.

@hexencoded: how did you manage to use it with the latest ionic beta version? thanksss

+1

This is how i resolved my scrolling issues in .10beta

ionicBootstrap(MyApp, { scrollAssist: false, autoFocusAssist: false });

insert that after your MyApp class

@EvanWillms Thanks so much.
Here is how to do it on RC2 :

1. In app.module.ts, set scrollAssist and autoFocusAssist to false in the root config object

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    IonicModule.forRoot(MyApp
      /*
       * MODIFY BOOTSTRAP CODE BELOW
       * Adds a config object that disables scrollAssist and autoFocusAssist for iOS only
       * https://github.com/driftyco/ionic/issues/5571
       */
      , {
        platforms : {
          ios : {
            // These options are available in ionic-angular@2.0.0-beta.2 and up.
            scrollAssist: false,    // Valid options appear to be [true, false]
            autoFocusAssist: false  // Valid options appear to be ['instant', 'delay', false]
          }
          // http://ionicframework.com/docs/v2/api/config/Config/)
        }
      }
      /*
       * END MODIFY
       */
    )
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
  ],
  providers: []
})
export class AppModule {}

2. In app.component.ts, disableScroll of the Ionic Keyboard Plugin :

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from 'ionic-native';
import { Keyboard } from 'ionic-native';

import { HomePage } from '../pages/home/home';

@Component({
    template: '<ion-nav [root]="rootPage"></ion-nav>',
})
export class MyApp {
    rootPage: any;

    constructor(public platform: Platform) {
       
        platform.ready().then(() => {
            // Okay, so the platform is ready and our plugins are available.
            // Here you can do any higher level native things you might need.
            StatusBar.styleDefault();

            /*
             * MODIFY BOOTSTRAP CODE BELOW
             * Disable the Ionic Keyboard Plugin scroll for iOS only
             * https://github.com/driftyco/ionic/issues/5571
             */
 
            if (this.platform.is('ios')) {
                Keyboard.disableScroll(true);
            }

            /*
             * END MODIFY
             */
        });
    }
}

that worked! No keyboard glitches anymore.

My system information:

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.5-201701182146
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: OS X Mavericks
Node Version: v6.9.4
Xcode version: Xcode 6.2 Build version 6C131e

So Thank You Bro it's work in
(input in slider)
cordova CLI: 6.5.0
Ionic Framework Version: 2.0.1-201702161925
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.6.0
Xcode version: Not installed

It works but I have to delete Keyboard.disableScroll(true);

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.1
Ionic App Lib Version: 2.1.1
Ionic App Scripts Version: 0.0.38
ios-deploy version: 1.9.0
ios-sim version: 5.0.8
OS: Mac OS X Sierra
Node Version: v7.2.1
Xcode version: Xcode 8.2 Build version 8C38

@vejja
thank you works like a charm

Does this still work for you all? Doesn't work for me. l tried scrollAssist: false, and autoFocusAssist:false with and without this.keyboard.disableScroll(true). Neither works. Logged my issue here. ionic-team/ionic-plugin-keyboard#275

Cordova CLI: 6.4.0
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.1.14
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 1.3.0
ios-deploy version: 1.9.1
ios-sim version: 5.0.12
OS: macOS Sierra
Node Version: v7.4.0
Xcode version: Xcode 8.3.2 Build version 8E2002

@vejja 's snippet worked for me...

$ ionic info
Cordova CLI: 7.0.1
Ionic Framework Version: 2.3.0
Ionic CLI Version: 2.1.14
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 1.1.4
ios-deploy version: 1.9.1
ios-sim version: 5.0.13
OS: OS X El Capitan
Node Version: v7.0.0
Xcode version: Xcode 8.2.1 Build version 8C1002

@vejja solution eliminated the issue when viewing the app in broswer on ionic serve.

But the issue of keyboard shrinking the viewport still exist when viewing my app on android using ionic devApp. I haven;t checked on iOS but I hope it does solves the problem of shrinking the WebVIew in that case!

Further, I have also checked Keyboard API provided by ionic. But there appears to be incomplete documentation on this plugin.
Can anyone please help me out here?

I would be greatly relieved if the keyboard somehow appears on top of contents without disturbing the viewport dimensions.

Here is my ionic info:

• ionic/cli-utils : 1.19.0
• Ionic CLI: 3.19.0
• ionic/app-scripts: 3.1.2
• ionic framework: ionic-angular 3.9.2
• Node: v8.9.0
• npm: 5.5.1

We also have an issue in Android Browser (not cordova). Clicking an input quickly shows and hides the keyboard, not allowing user to enter enything. Help!

I am facing the same problem i.e. when keyboard is being opened my whole background pushes up along with keyboard.

I having following config:

Ionic/cli: 4.3.1
cordova-plugin-ionic-keyboard: 2.1.3

Kindly help me out for the same as above all tricks are not working for me.

Adding the following to config.xml fixed the issue for me (ionic v4.4.0):

<preference name="KeyboardResize" value="true" /> <preference name="KeyboardResizeMode" value="ionic" />

See ionic-team/cordova-plugin-ionic-keyboard#47 (comment)