ionic-framework: ionic2 slides keyboard bug

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

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 7
Comments: 24 (6 by maintainers)

Most upvoted comments

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

douglasmoraisdev on Nov 6, 2017

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.

creativeitacademy on Oct 18, 2016

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.

hotforfeature on Feb 3, 2017

I have the same issue. 2 years old bug…

fishme on Feb 1, 2018

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

aymehri on Dec 3, 2017

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

pablozandona on May 11, 2017

@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.

vejja on Nov 11, 2016

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! (:

jgw96 on Apr 20, 2016

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.

dylanvdmerwe on Apr 20, 2016

Any progress on this issue?

alpotapov on Mar 18, 2016