Keyboard pushing header content on focus


I have this project on the screen dump were I am having issues when I focus on the input the, the header is automatically pushed and it will be hidden is there anything I can do to stop this weird behavior?
my project is based on ionic 4

Did you make your header fixed? It looks like it’s part of the content and gets pushed out of view, due to the fact, that the content is / was shrinked by the keyboard.

No… here is my code for the header

<ion-header>
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-menu-button></ion-menu-button>
      </ion-buttons>
  <!-- header toolbar -->
      <ion-segment [(ngModel)]="segment" (ionChange)="updatePosts()">
        <ion-segment-button value="all">
          All
        </ion-segment-button>
        <ion-segment-button value="favorites">
          Favorites
        </ion-segment-button>
      </ion-segment>
      <ion-buttons slot="end">
        <ion-button (click)="presentFilter()">
          <ion-icon slot="icon-only" name="options"></ion-icon>
        </ion-button>
      </ion-buttons>
    </ion-toolbar>
  <!-- end of main header toolbar -->
  </ion-header>

have some solved this pls?? I need help

Seems like this is an issue for so long. no one replied. I am also facing the same issue in iOS when keyboard launches
Here is my info:
Ionic:

Ionic CLI : 5.4.1 (…/versions/node/v10.16.3/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.11.7
@angular-devkit/build-angular : 0.803.26
@angular-devkit/schematics : 8.1.3
@angular/cli : 8.1.3
@ionic/angular-toolkit : 2.0.0

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.1.0, ios 5.1.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.1, (and 13 other plugins)

Utility:

cordova-res : 0.8.1 (update available: 0.15.1)
native-run : 0.2.9 (update available: 1.0.0)

I tried: not working

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

and

.ionic-content {
–offset-bottom: 0 !important;
}

anybody?

<ion-header>
  <ion-toolbar color="--bory-blue">
    <ion-buttons slot="start">
      <ion-menu-button color="light"></ion-menu-button>
    </ion-buttons>
    <ion-title>
      SpeechMate::{{auth.title}}
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content padding>
  <div class="videoIn">
    <div class="col-md-5">
      <h3>Local stream</h3>
      <video id="videoInput" autoplay
        poster="{{auth.root}}assets/png/webrtc.png"></video>
    </div>
  </div>
  <div class="row">
    <ion-grid>
      <ion-row>
        <ion-col size="12">
          <ion-button class="start" color="white" (click)='startAfterCheckPermission()' color="primary" *ngIf="status === NO_CALL">start</ion-button>
          <ion-button class="start" color="white" (click)='stop()' color="danger" *ngIf="status === POST_CALL || status === IN_CALL || status === IN_PLAY">stop</ion-button>
          <ion-button class="start" color="white" (click)='play()' color="primary" *ngIf="status === NO_CALL">play</ion-button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
  <div class="videoOut">
    <h3>Remote stream</h3>
    <video id="videoOutput" autoplay
      poster="{{auth.root}}assets/png/webrtc.png"></video>
  </div>
  <div class="row">
    <div class="col-md-12">
      <label class="control-label" for="console">Console</label><br>
      <br>
      <div id="console" class="democonsole">
        <ul></ul>
      </div>
    </div>
  </div>
  <div id="layer" *ngIf="show"><img src="{{auth.root}}assets/imgs/loading.gif"/></div>
</ion-content>

This is my HTML sample
I have got the issue when using v3, but I have no issue about that recently.