Ionic 2 Form goes up when keyboard shows

This all should be fixed in the RC4 (soon). That being said, to disable the scroll when input is focused, add this to your config object (in the @NgModule):

...
imports: [
    IonicModule.forRoot(MyApp, {
        scrollAssist: false, 
        autoFocusAssist: false
    }),
    ...
],
...

A very good explanation of those two properties can be found here:

Under Ionic2 defaults, however, there are additional features in place
attempting to both compensate for the keyboard slideover by adding
padding to the bottom of your content (‘scrollAssist’) and to keep the
focused input element within the viewport by scrolling back to it
(‘autoFocusAssist’). Both scrollAssist and autoFocusAssist have nicely
implemented switches in config that just don’t appear to have gotten
public documented yet.

You can also use the ionic-plugin-keyboard to stop the native browser from pushing/scrolling the content pane up and allow the keyboard to slide over and cover existing content:

this.platform.ready().then(() => {
    StatusBar.styleDefault();
    Splashscreen.hide();

    Keyboard.disableScroll(false); // <- like this

    // ...

UPDATE

Just like @Luckylooke mentioned in the comments:

Keyboard.disableScroll(), ios and windows supported

UPDATE II

As of Ionic 3.5.x seems like the keyboard still have some issues. I’ve found that the following configuration produces a better result (compared with the defaults) from the UI/UX point of view:

@NgModule({
    declarations: [
        MyApp,
        //...
    ],
    imports: [
        //...
        IonicModule.forRoot(MyApp, {
            scrollPadding: false,
            scrollAssist: true,
            autoFocusAssist: false
        })
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        // ...
    ],
    providers: [
        // ...
    ]
})
export class AppModule { }

By keeping scrollAssist: true we avoid the input to be hidden by the keyboard if it’s near the bottom of the page, and by setting scrollPadding: false we also avoid some weird bugs related to an empty white space after hiding the keyboard.

Leave a Comment