the keyboard is pushing tabs and apps contents up ionic 3 in Android

Question

I'm developing an app on ionic 3 and i’m having a problem. When I click on the search and the Keyboard opens simply pushes the entire contents of the App to top.

My code of the tabs, the view

<ion-tabs color='navbarColor'>
<ion-tab [root]="tab1Root" tabTitle="Inicio" tabIcon="ios-home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="Cultivos" tabIcon="ios-leaf"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Suelos" tabIcon="ios-flask"></ion-tab>
<ion-tab [root]="tab4Root" tabTitle="Acerca" tabIcon="ios-information-
circle"></ion-tab>
</ion-tabs>

The controller

import { Component } from '@angular/core';
import { AboutPage } from '../about/about';
import { HomePage } from '../home/home';
import { CultivosPage } from '../cultivos/cultivos';
import { SuelosPage } from '../suelos/suelos';

@Component({
templateUrl: 'tabs.html'
})
export class TabsPage {

tab1Root = HomePage;
tab2Root = CultivosPage;
tab3Root = SuelosPage;
tab4Root = AboutPage;

constructor() {

}
}

Answer 1

This is the solution which I have:

Put all your content inside the ionic grid as shown below.Afer that set the min-height: 100%. that is it.

.html

<ion-content class="my-content">
  <ion-grid>
    <ion-row class="row1">
      <ion-col col-12>

      </ion-col>
    </ion-row>

  </ion-grid>
</ion-content>

.scss

.my-content {
        ion-grid {
            min-height: 100%;
        }
        .row1 {
            flex: 1;
        }
}