CODEWITHSUNDEEP
androidcordovaionic-framework
Paulo Rodrigues
Paulo Rodrigues

Reputation: 783

Ionic keyboard delay on show - on hide, in a big HTML document

I have an html page with an extremely large book with a big vertical scroll.

When i open an input to enter text, the keyboard takes a long time to appear and write, it seems that when I open and close the keyboard, ionic resizes the viewport, recalculating the position of the entire book, causing excessive delay.

Does anyone have a solution for this, or a source that I can follow?

[Ionic, Cordova]

Upvotes: 3

Views: 1919

Answers (2)

Tyler
Tyler

Reputation: 3826

You can overcome issue this by disabling scrolling on keyboard opening. Ionic's Keyboard plugin allows you to specify whether a keyboard should pop up over the content or scroll the page to accommodate the new, smaller viewport. To accomplish this, here are some steps for Ionic v2, but you can also use this plugin for Ionic v1 projects.

Disable Keyboard Scroll

  1. Install Plugin Add the keyboard plugin to your Ionic app. You don't have to use the CLI, but I personally find it easiest this way.

    $ ionic plugin add ionic-plugin-keyboard
$ npm install --save @ionic-native/keyboard

  2. Add to File Import plugin to your app.component.ts file. This file should be located under src/app/app.components.ts. Add import parameter at the top of the file with the other import syntax.

    import { Keyboard } from '@ionic-native/keyboard';

    You will also need to add Keyboard to your list of providers under @Component. Here is what that should look like after you add it:

    @Component({
  templateUrl: 'app.html',
  providers: [
    Keyboard
  ]
})

    Note that this is going in the app.component.ts file, not the .ts file for the specific page you are looking to adjust the behavior of.

  3. Disable Scroll Within the class defined in the app.component.ts file there should be a function called initializeApp() that may contain other preferences such as hiding the stash screen and adjusting the status bar style. Add the below line inside of the this.platform.ready().then() callback.

    this.keyboard.disableScroll(true);

    Your initializeApp function should now look something like this:

    initializeApp() {
  this.platform.ready().then(() => {
    this.keyboard.disableScroll(true);
  });
}

Note that if you are using <ion-searchbar> instead of <input> it seems that there are some actions which cause Ionic to resize the container which causes blank space to appear at the top or bottom of the app. This may occur when using the cancel button for <ion-searchbar> or when clicking certain other non-standard Ionic elements.

Upvotes: 1

Eren Akkus
Eren Akkus

Reputation: 471

Remove "ion-content" and use "ion-scroll". maybe it helps you.

You can find more detail at this link; http://ionicframework.com/docs/api/directive/ionScroll/

Upvotes: 1

Related Questions