Ionic 2 Form goes up when keyboard shows

Question

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 ?

Answer 1

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.

Answer 2

有输入和形式与像被提到的滚动一些问题， 在这里 ，所以我建议等待下一个RC来得到固定，导致其不是你的代码故障的只是离子的bug。

Answer 3

Add this method to the .ts on this page

ionViewWillEnter() {
  this.content.resize();
}

My scenario is: the keyboard is called on this page, but when you return to the previous page, the page will appear as a whole, and I try to solve it with this method, I use ionic2.

Answer 4

Just add this properties to your ionicModule in app.module.ts. works for me.

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

Answer 5

Open iOS workspace from iOS platform of Ionic project and write below method in MainViewController.m

/////////////--------------------------//////////////
/*
 *Description: this method was trigger by selector keyboarwillhide from notification
 */
-(void)keyboardWillHide
{
    if (@available(iOS 12.0, *)) {
        WKWebView *webview = (WKWebView*)self.webView;
         for(UIView* v in webview.subviews){
            if([v isKindOfClass:NSClassFromString(@"WKScrollView")]){
                UIScrollView *scrollView = (UIScrollView*)v;
                [scrollView setContentOffset:CGPointMake(0, 0)];
             }
          }
     }
}

Call above method in viewDidLoad through NotificationCenter

- (void)viewDidLoad
{
    [super viewDidLoad];

    /**
     * observer notification when keyboard will hide
     */

    [[NSNotificationCenter defaultCenter] addObserver:self
                                             selector:@selector(keyboardWillHide)
                                                 name:UIKeyboardWillHideNotification
                                               object:nil];
}