Ionic2,Angular2: How to hide the content under the keyboard on a device when keyboard pops out?

问题

I tried to debug my app on an android device but I came across this weird problem that the keyboard which pops on clicking an input field pushes the whole page content(including the tabs at the bottom) to the top along with it. I might be missing out something silly. Kindly help me. I've gone through many links which were not very clear and a few were not working.

https://github.com/driftyco/ionic/issues/7047

https://github.com/driftyco/ionic/issues/5432

https://forum.ionicframework.com/t/ionic-2-ion-content-height-dynamically-changes-while-showing-keyboard-on-device/46360

This is my html file:

<ion-header>
<ion-navbar>
    <div class="titleicon">
        <img src="assets/logo.png" width="150px" style="display:inline-block" height="40px" (click)="LogoClick()" />
    </div>
    <button ion-button>
  <ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>

<div class="bgimg" style="background:url('assets/bg.png'); background-position: 0 -70px;">
    <div class="inner">
        <ion-item>
            <ion-input type="text" placeholder="Enter Keyword" [(ngModel)]="searchText" (ngModelChange)="textChanged($event)"> </ion-input>
        </ion-item>
        <ion-item>
            <ion-label> Branch</ion-label>
            <ion-select>
                <ion-option *ngFor="let branchObj of Branches" [value]="branchObj">
                    {{branchObj.name}}
                </ion-option>
            </ion-select>
        </ion-item>
        <ion-item>
            <ion-label>Subject</ion-label>
            <ion-select>
                <ion-option *ngFor="let subjectObj of subjects" [value]="subjectObj">
                    {{subjectObj.name}}
                </ion-option>
            </ion-select>
        </ion-item>
        <ion-item>
            <ion-label>
                Type of Course
            </ion-label>
            <ion-select>
                <ion-option *ngFor="let course of Courses" [value]="course">
                    {{course.choicetext}}
                </ion-option>
            </ion-select>
        </ion-item>
        <button class="button" type="submit" (click)="submitSearch()" ion-button full> Search </button>
        <div>{{message}}</div>
    </div>
</div>

This is my scss file:

page-search {
color: white;
.inner {
    margin: auto;
    width: 90%;
    height: 50%;
    padding-top: 35px;
    // padding-bottom: 0px;
}
.item-select {
    font-size: 15px;
    width: 100%;
    height: 25%;
    margin: 15px auto;
    border-radius: 5px;
}
.item-input {
    width: 100%;
    height: 25%;
    margin: 15px auto;
    border-radius: 5px;
}
.button {
    height: 30%;
    background: red;
    width: 30%;
    margin: auto;
    text-align: center;
    border-radius: 5px;
}
.alert-radio-label {
    white-space: normal!important;
}
.titleicon {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    text-align: center;
}
.bottomitems {
    padding-bottom: 20px;
    padding-top: 20px;
    margin: auto;
}
.item-divider {
    background-color: #535A5E;
    color: white;
}

Kindly provide me with a solution. Thanks in advance.

来源：https://stackoverflow.com/questions/43323089/ionic2-angular2-how-to-hide-the-content-under-the-keyboard-on-a-device-when-key