Ionic 5 / focus on input, keyboard show up, will move header away

Ionic Framework Ionic Angular
1

This problem is similar to the following

We are testing the operation on an Ios terminal.

When Input is focused, the keyboard appears and
The content is pushed up, but the entire header is pushed up.
So, We would like to fix the header same position.

src/app/app.module.ts

imports: [
  BrowserModule,
  IonicModule.forRoot(
    {
      mode: 'ios',
      swipeBackEnabled: false,
      scrollAssist: false,
      scrollPadding: false
    }
  ),

We have tried applying css position:fix to the header, but We can’t get it to stay in place.
We also set the fullscreen property of the ion-content component to true, but it also cannot be fixed.

<ion-header>
  <ion-toolbar>
    <ion-button fill="clear" (click)="back()">
      <ion-icon name="chevron-back-outline"></ion-icon>
    </ion-button>
    <ion-title>title</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen>

How do we fix the header when the input is focused?

4 Likes