ionic2 slides keyboard bug

[jurienhamaker]

Short description of the problem:

I got a couple of slides, and the last one of them has a login form. whenever I try to type in the input fields, the keyboard pops up and the slides are broken, they're auto resized to the space left, and after closing the keyboard they stay that way.

What behavior are you expecting?

I am expecting it to be pushed up (like usual phone behavior I guess?) and make it possible to use form fields in slides.

Steps to reproduce:

1. Create a view with slides
2. add a form to one of the slides (even one input fiels will do)
3. Tap the input field, tada.

        <ion-slide>
            <img src="img/superbuddy_logo.png" class="slide-img"/>
            <h2 class="slide-title">Let's get started!</h2>
            <ion-item>
                <ion-label>username</ion-label>
                <ion-input></ion-input>
            </ion-item>
            <ion-item>
                <ion-label>password</ion-label>
                <ion-input type="password"></ion-input>
            </ion-item>
            <button full>Log in</button>
            <div class="divider"></div>
            <button outline>
                <ion-icon name="logo-facebook"></ion-icon>
                Log in with facebook
            </button>
            <div class="divider"></div>
            <button clear>Create new account?</button>
        </ion-slide>

Ionic Version: 1.x / 2.x 2

Browser & Operating System: iOS / Android / Chrome All of them.

Run ionic info from terminal/cmd prompt:

Cordova CLI: Not installed
Ionic Version: 2.0.0-beta.1
Ionic CLI Version: 2.0.0-beta.17
Ionic App Lib Version: 2.0.0-beta.8
OS:
Node Version: v5.5.0

[alpotapov]

Any progress on this issue?

[EvanWillms]

Given this description of space being suddenly claimed by the keyboard when an input field is tapped and then not released afterward, this sounds like another effect of #5432.

@HazeDevelopment, @alpotapov: You might be able to make use of the workaround I found to let the keyboard slide over the content, preventing it from getting permanently squished: https://forum.ionicframework.com/t/disable-scroll-ionic2-ios9-not-working/44847/5?u=evanwillms

@brandyscarney: I would guess that this issue shares a root cause with #5432 and is unrelated to potential work in #6007, but you should probably have someone more familiar verify.

[jgw96]

related to #5744

[dylanvdmerwe]

An plunkr example of a form with various input components within an <ion-slides>: http://plnkr.co/edit/i0MIv8mlQ5WljUJxlBAs?p=preview

The form creates all sorts of chaos. Granted this is quite a big form, but this is just an example.

• Cannot scroll through the form.
• Pager moves when the form scrolls.
• Swiping back and forth messes between pages while capturing input messes with the pager, the vertical padding and scroll position of the other slides.

[jgw96]

Hey everyone! Just wanted to let the community know that we are currently making alot of changes to slides for beta.5, along with some much better docs, so look out for fixes for slides in beta.5! (:

[eusthace811]

Any news about this bug? I having exactly the same problem....:(

[jgw96]

Hello all! Is this still an issue with Ionic 2 beta.10? Thanks!

[jgw96]

Hello all! As it seems it has been a while since there was any activity on this issue i will be closing it for now. Feel free to comment if you are still running into this issue. Thanks for using Ionic!

[haroondilshad]

I'm still facing this issue

[sarahtully]

Still experiencing this issue as well

[creativeitacademy]

Is there any solutions to this issue yet? I am using Ionic 2 RC1 and having this problem. I put my login form on a slider, then on iPhone if I tap on the input box then if I move away the focus from the textbox and tap again then the form moves up. Please see the screenshot. I tried Keyboard.disableScroll(true) but didn't work. I am not sure how to use scrollAssist and autoFocusAssist with RC1 though.

[vejja]

Same here with RC2. _Bug happens on iOS, not on Android, not in _browser__ Here is a full report on the bug

On Simulator

---

Initial screen = normal

Entering first field = content goes mostly off screen, almost all blank, second field disappeared

Entering second field = content goes again off screen, biiiiig time !!

Typing in second field = first field has been pushed up again

Leaving second field = back to normal

On Device

Initial screen = normal

Entering first field = content goes mostly off screen, now we can see why (keyboard), second field has disappeared also

Exiting first field = second field label re-appears

Entering second field = not pushed as much as on simulator

Leaving second field = back to normal !

Re-entering second field = biiiiiig mess

Info

Your system information:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.2
Ionic CLI Version: 2.1.7
Ionic App Lib Version: 2.1.4
Ionic App Scripts Version: 0.0.42
ios-deploy version: 1.9.0
ios-sim version: 5.0.10
OS: macOS Sierra
Node Version: v7.0.0
Xcode version: Xcode 8.1 Build version 8B62

HTML

<ion-content class="init">
    <ion-slides pager #slider [options]="options">
        <ion-slide>
            <ion-toolbar>
                <ion-buttons end>
                    <button ion-button (click)="letSlide()">Next</button>
                </ion-buttons>
            </ion-toolbar>
            <h2 class="slide-title">Welcome</h2>
            <p>
                Click next to begin the initialization.
            </p>
        </ion-slide>
        <ion-slide>
            <h2 class="slide-title">Credentials</h2>
            <p>Please enter your serial number and email address</p>
            <form [formGroup]="credentialsForm" (ngSubmit)="submitCredentials(credentialsForm.value)">
                <ion-item>
                    <ion-label floating>Serial</ion-label>
                    <ion-input type="text" formControlName="serial"></ion-input>
                </ion-item>
                <ion-item>
                    <ion-label floating>Email</ion-label>
                    <ion-input type="email" formControlName="email" clearInput></ion-input>
                </ion-item>
                <div padding>
                    <button ion-button color="primary" block type="submit" [disabled]="!credentialsForm.valid">Validate</button>
                </div>
            </form>
        </ion-slide>
                <ion-slide>
                   Whatever
                </ion-slide>
        <ion-slide>
            <h2 class="slide-title">Ready to Play?</h2>
            <button ion-button large clear (click)="initDone()">
                Continue
                <ion-icon name="arrow-forward"></ion-icon>
            </button>
        </ion-slide>
    </ion-slides>
</ion-content>

TypeScript

import { Component, ViewChild } from '@angular/core';
import { NavController, Slides } from 'ionic-angular';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
import { HomePage } from '../../pages/home/home';

@Component({
    templateUrl: 'init.html',
})
export class InitPage {
    @ViewChild('slider') slider: Slides;
    nav: NavController;
    credentialsForm: FormGroup;
    slides: any;
    options: any;

    constructor(public navCtrl: NavController, public fb: FormBuilder) {
        this.nav = navCtrl;
        this.credentialsForm = this.fb.group({
            serial: ['', [Validators.required, Validators.pattern('^[A-Fa-f0-9]{16}$')]],
            email: ['', [Validators.required, Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$')]]
        });
        this.options = {
            pager: true,
            onlyExternal: true
        };
    }

    letSlide(self: any = this): void {
        self.slider.slideNext();
    }

    submitCredentials(data): void {
        this.letSlide(this));
    }

    initDone(): void {
        this.navCtrl.setRoot(HomePage);
    }
}

Safari inspector (on simulator)

When everything is normal, ion-content inserts a div with class="scroll-content"

When the screen goes mad, ion-content inserts padding-bottom of 434px into that div

[vejja]

@manucorporat There is a very helpful gist by @EvanWillms https://gist.github.com/EvanWillms/8773f8cfa12f469fabf0bdd7a75723e7 I am pretty sure it can help nail down the root cause of the issue.

[Daskus1]

Is there any progress on this issue? I have the same problem, when typing on an input inside a slide the slide is broken

[hotforfeature]

I've been using <ion-slides> with form inputs for a while now. The problem is that the slider wasn't designed for use with assistive scroll.

I have a workaround described in #10258. It involves making the slider ion-fixed and using <ion-content> inside each <ion-slide>.

The one caveat is that <ion-content> also wasn't designed to deal with multiple content elements on a page. There's a patch in the linked issue that you'll want to call on your ViewController when you create your component.

[sufiiiyan]

I'm still facing this issue when I is use input with ion-slide. Is there any solution or any updates

ordova CLI: 6.5.0 Ionic Framework Version: 2.2 Ionic CLI Version: 2.2.1 Ionic App Lib Version: 2.2.0 Ionic App Scripts Version: 1 ios-deploy version: Not inst ios-sim version: Not install OS: Windows 8.1 Node Version: v6.10.0 Xcode version: Not installed

[pablozandona]

+1

Cordova CLI: 6.5.0 Ionic Framework Version: 3.1.1 Ionic CLI Version: 2.2.3 Ionic App Lib Version: 2.2.1 Ionic App Scripts Version: 1.3.4 ios-deploy version: Not installed ios-sim version: Not installed OS: Linux 4.10 Node Version: v5.12.0 Xcode version: Not installed

[douglasmoraisdev]

This workaround worked for me in app.modules.ts:

imports...

@NgModule({

    declarations: [
        ...
    ],

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

Source: https://forum.ionicframework.com/t/disable-scroll-ionic2-ios9-not-working/44847/9

[krunal9421]

I am facing this issue in android case. Any solution for it.

[aymehri]

Hello i'm facing the same issue. Any update?

[fishme]

I have the same issue. 2 years old bug...

[polfernandez]

Hi guys, I still have the issue. The keyboard moves the whole screen up when it appears. Someone has solved it? :'(

I have the same issue ONLY on iOS

Find attached 2 pictures showing the problem:

--- Normal Screen ---

--- Screen goes up when keyboard appears ---

My code:

<ion-header>
  <ion-navbar>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list no-lines> 
      <ng-container>
      </ng-container>
  </ion-list>
</ion-content>

<ion-footer>
 <ion-toolbar>
  <ion-item>
    <div item-content>
      <ion-textarea 
                    fz-elastic
                    (ionFocus)="_onFocus($event)"
                    (ionBlur)="_onBlur($event)"
                    (ionChange)="_onChange($event)"
                    (keypress)="_onKeypress($event)"
                    [disabled]="disabled"
                    [placeholder]="placeholder">
      </ion-textarea>
    </div>
  </ion-item>
 </ion-toolbar>
</ion-footer>

IONIC INFO

    @ionic/cli-utils  : 1.12.0
    ionic (Ionic CLI) : 3.12.0

global packages:

cordova (Cordova CLI) : 6.5.0 local packages:

   @ionic/app-scripts : 2.1.4
    Cordova Platforms  : android 6.4.0 ios 4.3.1
    Ionic Framework    : ionic-angular 3.9.2

System:

    ios-deploy : 1.9.2 
    ios-sim    : 6.1.2 
    Node       : v8.9.1
    npm        : 2.15.12 
    OS         : macOS High Sierra
    Xcode      : Xcode 9.2 Build version 9C40b 

[ionitron-bot[bot]]

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/42