[BUG] content disappears when keyboard is up

[ionitron-bot[bot]]

Original issue by @AmitMY on 2017-01-26T13:05:47Z

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

[pauloprado]

I've manage to fix this into my app by inserting the slides into a grid and controlling the size of the grid.

The first step is to remove the blank space that goes over your components, adding the following code into your css:

    .scroll-content{
        margin-bottom: 0px !important;
        padding-bottom: 0px !important;
    }

Then place your slides into the grid with only 1 row and column

<ion-grid>
    <ion-row>  
        <ion-col>  
            Slide content
        </ion-col>  
    </ion-row>  
</ion-grid>

The size of the grid should be handled whether or not the keyboard is being shown. So, first you need to import the keyboard from the keyboard-plugin into your .ts

import { Keyboard } from 'ionic-angular'

export class Page {
    constructor(public navCtrl: NavController, public navParams: NavParams,
                private keyboard: Keyboard) { }
}

And use this keyboard to define the class of your ion-content:

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

The last step is to use theses two classes to really control the size through the css:

.open{
    ion-grid{
        height: auto;
    }
    ion-row{
        height: auto;
    }    
}

.closed{
    ion-grid{
        height: 100%;
    }
    ion-row{
        height: 100%;
    }
}