ionic-framework: [BUG] content disappears when keyboard is up

Ionic version: (check one with “x”) [ ] 1.x [x] 2.x

I’m submitting a … (check one with “x”) [x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior: When having slides, with a scroll, as suggested here, in the last comment, the content disappears when opening the keyboard, except for the first input.

Note: this happens on device, in this example I am using an android emulator, but it also happens if you serve and open the page via iPhone.

Here is a video demonstration

Expected behavior: Normal input behavior

Steps to reproduce: As said, I am running this on a device, so plunkr won’t work. This is the relevant code:

<ion-slides #slider pager class="swiper-no-swiping">
    <ion-slide class="scroll-content">
        <ion-scroll scrollY="true">
            <h2>Tab title</h2>
            <ion-list>
                <ion-item *ngFor="let i of [1,2,3,4,5,6,7,8,9,10]">
                    <ion-label floating>Text field</ion-label>
                    <ion-input type="text" [(ngModel)]="text"></ion-input>
                </ion-item>
            </ion-list>
        </ion-scroll>
    </ion-slide>
</ion-slides>

This is the CSS:

ion-scroll {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
}

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Your system information:

 ordova CLI: 6.4.0
Ionic Framework Version: 2.0.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 0.0.47
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.1
Xcode version: Not installed

About this issue

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

Commits related to this issue

fix(keyboard): big keyboard/input refactor fixes #9699 fixes #11484 fixes #11389 fixes #11325 fixes #11291 fixes #10828 fixes #11291 fixes #10393 fixes #10257 fixes #9434 fixes #8933 fixes #7178 fixe... — committed to manucorporat/ionic by manucorporat 7 years ago
fix(keyboard): big keyboard/input refactor fixes #9699 fixes #11484 fixes #11389 fixes #11325 fixes #11291 fixes #10828 fixes #11291 fixes #10393 fixes #10257 fixes #9434 fixes #8933 fixes #7178 fixe... — committed to manucorporat/ionic by manucorporat 7 years ago

Most upvoted comments

.scroll-content {
    margin-bottom: -56px !important;
}
ion-content > div {
    padding: 0 !important;
    margin: 0 !important;
}

gbrits on Dec 10, 2017

@gbrits solution worked for me thank you.

pradt on Jun 19, 2018

after long research and reading that this issue is still open in cordova/ionic, I decided to solve the issue by myself. The idea is to adapt the header’s height programmatically depending on the keyboard’s height.

1.- On the header of the view template (HTML) attach a style directive:

<ion-header [ngStyle]="getKeyboardStyle()" >

2.- On the component (TS) I triggering the keyboard’s events (show, hide) and the height value:

  Observable.merge(this.nativeKeyboard.onKeyboardShow(), this.keyboard.didShow)
    .subscribe((e: any) => {
      this.keyboardHeight = e.keyboardHeight;
    });

 Observable.merge(this.nativeKeyboard.onKeyboardHide(), this.keyboard.didHide)
    .subscribe((e: any) => {
      this.keyboardHeight = e.keyboardHeight | 0;
    });
}

Where this.keyboardHeight is a global variable number type. And this.keybaord and this.nativeKeyboard are the cordova plugins.

3.- Finally, this is the method returning the height attached to the ngStyle directive of the header:

  getKeyboardStyle() {
    let style = {
      'top': this.keyboardHeight ? this.keyboardHeight + 'px' : '0px'
    }
    return style;
 }

I hope that this can help.

polfernandez on Mar 6, 2018

Facing same issue

tr049 on Dec 13, 2017

chrismclarke on Oct 29, 2017

zakton5 on Sep 15, 2017

any update on this ? or any workaround?

ghaiat on Feb 6, 2017

1+ same issue here, using inputs inside slides. [Image here].(https://github.com/driftyco/ionic/issues/6228#issuecomment-276930299)

#6228

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.6.0
Xcode version: Not installed

chrislow on Feb 2, 2017