ionic2 slides keyboard bug #5571

jurienhamaker · 2016-02-23T15:05:35Z

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:

Create a view with slides
add a form to one of the slides (even one input fiels will do)
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

The text was updated successfully, but these errors were encountered:

alpotapov · 2016-03-18T19:21:00Z

Any progress on this issue?

EvanWillms · 2016-04-10T21:47:59Z

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 · 2016-04-12T16:48:58Z

related to #5744

dylanvdmerwe · 2016-04-20T09:10:14Z

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 · 2016-04-20T14:25:09Z

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 · 2016-06-07T23:22:17Z

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

sarahtully · 2016-08-08T19:06:45Z

Still experiencing this issue as well

creativeitacademy · 2016-10-18T10:58:51Z

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 · 2016-11-10T23:07:38Z

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 · 2016-11-11T11:29:20Z

@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 · 2017-01-02T22:57:55Z

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 · 2017-02-03T17:39:42Z

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 · 2017-04-07T13:48:22Z

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 · 2017-05-11T15:48:39Z

+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 · 2017-11-06T16:12:56Z

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 · 2017-11-23T03:46:14Z

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

aymehri · 2017-12-03T11:35:09Z

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

fishme · 2018-02-01T06:43:40Z

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

polfernandez · 2018-02-21T10:41:44Z

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 · 2018-11-01T19:53:42Z

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 · 2018-11-01T19:53:44Z

Issue moved to: ionic-team/ionic-v3#42

Ionitron added platform:ios labels Feb 23, 2016

adamdbradley self-assigned this Feb 23, 2016

adamdbradley added this to the 2.0.0-beta.5 milestone Feb 23, 2016

brandyscarney mentioned this issue Apr 1, 2016

ionic2 ion-slides option not working as expected #6007

Closed

EvanWillms mentioned this issue Apr 10, 2016

bug: ion-slides with form inputs #5744

Closed

brandyscarney modified the milestones: 2.0.0-beta.5, 2.0.0-beta.6, 2.0.0-beta.7 Apr 20, 2016

brandyscarney modified the milestones: 2.0.0-beta.7, 2.0.0-beta.8 May 18, 2016

brandyscarney modified the milestones: 2.0.0-beta.8, 2.0.0-beta.9 Jun 2, 2016

brandyscarney reopened this Aug 8, 2016

Ionitron unassigned adamdbradley Aug 8, 2016

Ionitron removed this from the 2.0.0-beta.11 milestone Aug 8, 2016

Ionitron closed this as completed Aug 8, 2016

Ionitron added ionitron:closed and removed needs: reply the issue needs a response from the user labels Aug 8, 2016

brandyscarney reopened this Aug 8, 2016

brandyscarney removed the ionitron:closed label Aug 8, 2016

vejja mentioned this issue Nov 10, 2016

bug: Keyboard pushes the whole screen up #5432

Closed

mhartington assigned manucorporat Nov 10, 2016

hotforfeature mentioned this issue Feb 3, 2017

Nesting multiple <ion-content> with <ion-slides> #10258

Closed

brandyscarney added the slides label Jul 18, 2018

adamdbradley added the ionitron: v3 moves the issue to the ionic-v3 repository label Nov 1, 2018

ionitron-bot bot closed this as completed Nov 1, 2018

ionitron-bot bot locked and limited conversation to collaborators Nov 1, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ionic2 slides keyboard bug #5571

ionic2 slides keyboard bug #5571

jurienhamaker commented Feb 23, 2016

alpotapov commented Mar 18, 2016

EvanWillms commented Apr 10, 2016

jgw96 commented Apr 12, 2016

dylanvdmerwe commented Apr 20, 2016 •

edited

Loading

jgw96 commented Apr 20, 2016

eusthace811 commented Jun 7, 2016

sarahtully commented Aug 8, 2016

creativeitacademy commented Oct 18, 2016

vejja commented Nov 10, 2016 •

edited

Loading

vejja commented Nov 11, 2016

Daskus1 commented Jan 2, 2017

hotforfeature commented Feb 3, 2017

sufiiiyan commented Apr 7, 2017 •

edited

Loading

pablozandona commented May 11, 2017 •

edited

Loading

douglasmoraisdev commented Nov 6, 2017

krunal9421 commented Nov 23, 2017

aymehri commented Dec 3, 2017

fishme commented Feb 1, 2018

polfernandez commented Feb 21, 2018 •

edited

Loading

ionitron-bot bot commented Nov 1, 2018

ionitron-bot bot commented Nov 1, 2018

ionic2 slides keyboard bug #5571

ionic2 slides keyboard bug #5571

Comments

jurienhamaker commented Feb 23, 2016

Short description of the problem:

What behavior are you expecting?

alpotapov commented Mar 18, 2016

EvanWillms commented Apr 10, 2016

jgw96 commented Apr 12, 2016

dylanvdmerwe commented Apr 20, 2016 • edited Loading

jgw96 commented Apr 20, 2016

eusthace811 commented Jun 7, 2016

sarahtully commented Aug 8, 2016

creativeitacademy commented Oct 18, 2016

vejja commented Nov 10, 2016 • edited Loading

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

HTML

TypeScript

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 commented Nov 11, 2016

Daskus1 commented Jan 2, 2017

hotforfeature commented Feb 3, 2017

sufiiiyan commented Apr 7, 2017 • edited Loading

pablozandona commented May 11, 2017 • edited Loading

douglasmoraisdev commented Nov 6, 2017

krunal9421 commented Nov 23, 2017

aymehri commented Dec 3, 2017

fishme commented Feb 1, 2018

polfernandez commented Feb 21, 2018 • edited Loading

ionitron-bot bot commented Nov 1, 2018

ionitron-bot bot commented Nov 1, 2018

dylanvdmerwe commented Apr 20, 2016 •

edited

Loading

vejja commented Nov 10, 2016 •

edited

Loading

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

sufiiiyan commented Apr 7, 2017 •

edited

Loading

pablozandona commented May 11, 2017 •

edited

Loading

polfernandez commented Feb 21, 2018 •

edited

Loading