Ionic-framework: bug: ion-slides with form inputs

[dylanvdmerwe]

Short description of the problem:

On a device, when there is an ion-input, the ion-list scrolling behaviour does not work.

What behavior are you expecting?

On a device when inputting information, the keyboard opens up and the ion-list scrolls so that the keyboard does not cover the input fields. When the user closes the keyboard, the ion-list then scrolls back to it's original position.

If input is required in an ion-slides component (maybe as part of a wizard), the scrolling behaviour does not work as expected. The form's inputs move off the screen and the content cannot be seen. When the keyboard is closed, the content does not move back into focus.

The following simple input form works perfectly. The keyboard shows and the inputs are scrolled so that they are visible with the keyboard.

<ion-content class='register-page'>
            <ion-list>
                <img padding src='img/logo.png' style='max-width:100%'>
                <p>What course are you studying?</p>
                    <ion-item class='register-select'>
                        <ion-label hidden>Course</ion-label>
                        <ion-input placeholder='Enter your course' [ngModel]="courseInfo" (ngModelChange)="onCourseEntered($event)"></ion-input>
                    </ion-item>
                    <button clear (click)="continuePressed()" [disabled]='!courseInfoEntered'>Continue</button>
            </ion-list>
</ion-content>

If this exact same code was inside of an , the scrolling behaviour does not work.

A screenshot of all the content completely off screen with the keyboard open:

Ionic Version: 2.x

Browser & Operating System: iOS / Android

Run ionic info from terminal/cmd prompt:

Cordova CLI: 6.0.0
Ionic Version: 2.0.0-beta.2
Ionic CLI Version: 2.0.0-beta.19
Ionic App Lib Version: 2.0.0-beta.9
OS:
Node Version: v5.7.0

[EvanWillms]

With ion-slides getting pushed around by the keyboard, this sounds very similar to #5571 and is likely another symptom of #5432.

[adamdbradley]

Related: https://github.com/driftyco/ionic/issues/6133

[jgw96]

Hello all! Is this still an issue with the latest version of ionic? 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. There were a couple of fixes for the keyboard and scrolling in an earlier release so this should be fixed now. Thanks for using Ionic!

[RonCan]

I'm still facing this issue

[Bouzmine]

@jgw96 Could you reopen this issue? I facing it using the latest version of ionic (beta.11).

[Chuckv01]

@jgw96 This is still happening with RC0.

[jamesgroat]

@manucorporat I'm seeing this as well. (also FYI this issue is assigned to a closed milestone)

[ivanmayes]

Happening in Ionic 1 with ion-slides as well.

[kazigais]

Any workaround?

[jgw96]

Hello all! I am going to close this issue as a duplicate of #9553 as they are caused by the same issue.

[LiveListMobile]

Just to chime in here on 04/30/17. I have am experiencing this issue as well. The inputs on the form jump around and/or disappear from the screen altogether making the slides completely unusable.

[juanpmarengo]

I am also experiencing this issue.

Ionic info:

cli packages: (/home/juanpmarengo/Projects/mydoc-ionic/node_modules)

@ionic/cli-plugin-cordova       : 1.6.1
@ionic/cli-plugin-ionic-angular : 1.4.1
@ionic/cli-utils                : 1.7.0
ionic (Ionic CLI)               : 3.7.0

global packages:

Cordova CLI : 7.0.1

local packages:

@ionic/app-scripts : 2.1.0
Cordova Platforms  : android 6.2.3
Ionic Framework    : ionic-angular 3.5.3

System:

Android SDK Tools : 26.0.1
Node              : v8.0.0
OS                : Linux 4.10
npm               : 5.3.0

[edzillion]

Still getting this bug with latest:

cli packages: (E:\dev\circles_testnet_v2\node_modules)

@ionic/cli-plugin-cordova       : 1.6.2
@ionic/cli-plugin-ionic-angular : 1.4.1
@ionic/cli-plugin-proxy         : 1.4.1
@ionic/cli-utils                : 1.7.0
ionic (Ionic CLI)               : 3.7.0

global packages:

Cordova CLI : 7.0.1

local packages:

@ionic/app-scripts : 2.1.3
Cordova Platforms  : android 6.2.3 browser 4.1.0 ios 4.4.0
Ionic Framework    : ionic-angular 3.5.3

System:

Node : v6.11.2
OS   : Windows 8.1
npm  : 4.1.2

[wowkucko]

Have you ever found an actual working solution for this? I don't want to put all my input fields into one page, i guess slides are my only option.

[edzillion]

Not I @wowkucko

[miguel-sobong]

getting this too

[yohoprashant]

same here.. and I am stuck in the middle of a project.

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : 8.0.0

local packages:

@ionic/app-scripts : 3.1.8
Cordova Platforms  : android 7.0.0 browser 5.0.3
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 26.1.1
Node              : v9.4.0
npm               : 5.6.0 
OS                : macOS High Sierra

[shehrazjazib]

I am facing still this issue when keyboard open, my slides go up and didn't show, until keyboard hide.

[jdnichollsc]

any solution?

[yohoprashant]

I had same problem. But I was surprised when It worked after adding a div tag around ion-slides.

[madsheep]

The issue comes from the fact that ion-slides have 100% height set, so each slide covers whole screen from top to bottom. The workaround from @yohoprashant works because putting your ion-slides in a div without styles sets their height to 100% of unstyled div (and that let's page scroll normally again)

A more explicit, but similar fix could be:

component:

import { Keyboard } from 'ionic-angular'
export class MyComponent { 
  constructor (
    private keyboard: Keyboard
  ){}
}

html:

<ion-slides [class]="keyboard.isOpen() ? 'open-keyboard' : 'closed-keyboard'">
(...)
</ion-slides> 

css:

.open-keyboard {
  ion-slides {
    height: auto;
  }
}
.closed-keyboard {
  ion-slides {
    height: 100%;
  }
}

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.