[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

@AmitMY

Hello @AmitMY , thanks for opening an issue with us and a HUGE thanks for the detailed info and repro case. We will take a look into this.

I have this as well, with an ion-content inside an ion-slide. Unfortunately, everything in the ion-slides remains invisible after the keyboard is closed; I can actually interact with elements, type into inputs, etc, but can't see anything. Any manual changes to styling (i.e. in the web inspector) immediately make the contents of the slider visible again. For us this only happens on iOS.

<ion-slides runCallbacksOnInit="true" [pager]="false"(ionSlideDidChange)="onSlideChange()">
    <template [ngIf]="condition">
        ${require('./foo.html')}
    </template>
    <template ngFor let-s [ngForOf]="slides" let-i="index">
        <ion-slide layout="column">
            <ion-content flex fullscreen="true">
                <div>
                   content goes here
                </div>
            </ion-content>
        </ion-slide>
    </template>
</ion-slides>

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0
Ionic CLI Version: 2.1.13
Ionic App Lib Version: 2.1.7
ios-deploy version: 1.9.0
ios-sim version: 5.0.11
OS: macOS Sierra
Node Version: v4.5.0
Xcode version: Xcode 8.2.1 Build version 8C1002

1+ same issue here, using inputs inside slides. [Image here].(#6228 (comment))

#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

I had this issue, but found this fix on stackoverflow. So far this seems like an alright solution, but I'm not certain. I took some screenshots in Chrome's devtools:

Without keyboard:

With keyboard:

fix(keyboard): big keyboard/input refactor

+1

Problem still open.... Having the same issue here

Facing same issue

Same issue on my side too and it seems there´s no fix/temporal patch working like in other versions.

Working with Ionic 3.
Coming from: #12661

Is there an actual solution for this issue anywhere? I've found at least a dozen threads linking each other but no definitive solution. I've wasted lot of time on it, tried all solutions but nothing is working. The scrolling behavior on focus is unpredictable.

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.

@gbrits

@gbrits solution worked for me thank you.

any solution ?

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

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

Navigation Menu

Repository navigation

[BUG] content disappears when keyboard is up #10183

1 remaining item

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

[BUG] content disappears when keyboard is up #10183

Description

Activity

jgw96 commented on Jan 26, 2017

mattbryan9 commented on Jan 27, 2017

chrislow commented on Feb 2, 2017

daraul commented on Apr 7, 2017

zakton5 commented on Sep 15, 2017

chrismclarke commented on Oct 29, 2017

aymehri commented on Dec 3, 2017

milanosie commented on Dec 6, 2017

1 remaining item

tr049 commented on Dec 13, 2017

llalueza commented on Dec 22, 2017

iamongit commented on Mar 5, 2018

polfernandez commented on Mar 6, 2018

pradt commented on Jun 19, 2018

carvarr commented on Jul 29, 2018

ionitron-bot commented on Nov 28, 2018

ionitron-bot commented on Nov 28, 2018

Metadata

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Issue actions