Ionic 2 Form goes up when keyboard shows

I am using latest version of ionic 2. My code has a <ion-content padding><form></form></ion-content> with a text input inside of it. When I try to type something in there on Android the whole page gets pushed upwards by the keyboard.

html file

<ion-content class="login-screen" padding>
  <form (ngSubmit)="login()" novalidate>
    <ion-list>
      <ion-item>
        <ion-label fixed>Username</ion-label>
        <ion-input type="text" name="username" [(ngModel)]="username" required></ion-input>
      </ion-item>
      <ion-item>
        <ion-label fixed>Password</ion-label>
        <ion-input type="password" name="password" [(ngModel)]="password" required></ion-input>
      </ion-item>
    </ion-list>
    <button ion-button full type="submit">Login</button>
  </form>
  <button ion-button clear full outline type="button" (click)="openModal()">Forgot Password?</button>
</ion-content>

is there any solutions ?

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.

Ionic 2 Form goes up when keyboard shows

Related

Recent Posts