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

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 <ion-slide>, the scrolling behaviour does not work.

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

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

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 23 (6 by maintainers)

Most upvoted comments

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

edzillion on Aug 8, 2017

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%;
  }
}

madsheep on Jul 11, 2018

getting this too

miguel-sobong on Feb 13, 2018

Happening in Ionic 1 with ion-slides as well.

ivanmayes on Oct 11, 2016

@jgw96 This is still happening with RC0.

Chuckv01 on Oct 4, 2016