[BUG] content disappears when keyboard is up

[AmitMY]

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

[jgw96]

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.

[mattbryan9]

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

[chrislow]

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

[ghaiat]

any update on this ? or any workaround?

[daraul]

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:

[zakton5]

+1

[chrismclarke]

+1

[aymehri]

+1

[milanosie]

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

[gbrits]

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

[tr049]

Facing same issue

[llalueza]

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: https://github.com/ionic-team/ionic/issues/12661

[ghost]

have same issue here. cli packages: (/usr/local/lib/node_modules) @ionic/cli-utils : 1.19.0 ionic (Ionic CLI) : 3.19.0 global packages: cordova (Cordova CLI) : 7.1.0 local packages: @ionic/app-scripts : 3.1.4-201711302144 Cordova Platforms : android 6.3.0 Ionic Framework : ionic-angular 3.9.2 System: Node : v6.11.4 npm : 3.10.10 OS : OS X El Capitan Xcode : Xcode 8.2.1 Build version 8C1002

i have try with this but not working

https://gist.github.com/EvanWillms/8773f8cfa12f469fabf0bdd7a75723e7

config: { // These options are available in ionic-angular@2.0.0-beta.2 and up. scrollAssist: false, // Valid options appear to be [true, false] autoFocusAssist: false // Valid options appear to be ['instant', 'delay', false] } // http://ionicframework.com/docs/v2/api/config/Config/

is not supported with ionic 3 i guess

[iamongit]

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.

[polfernandez]

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.

[pradt]

@gbrits solution worked for me thank you.

[carvarr]

any solution ?

[ionitron-bot[bot]]

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!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/170