keyboard pushes content upwards with ionic

Question

I am new to ionic and i am designing a login page. However i noticed when i deploy the app to an ios device, the native ios keyboard pushes the content upwards when a input field is clicked/pressed on.

I have been trying to figure out how to solve this issue, but i have had no luck. I am currently using the latest ionic framework.

Is there a way where i can ensure content is not pushed up?

here is my login html:

<ion-content class="background" [fullscreen]="true" slot="fixed">
  <h1 class="login-title-text">ign you in</h1>
  <p class="login-subtitle-text">Welcome back!</p>

  <div class="inputs">
    <ion-input class="item-input" type="email" placeholder="Email"></ion-input>
    <ion-input class="item-input" type="password" placeholder="Password"></ion-input>
  </div>
</ion-content>

<ion-footer>
  <ion-button color="dark" expand="block">Login</ion-button>
  <ion-button color="dark" expand="block">Forgot Password</ion-button>
  <ion-button color="dark" expand="block">Register</ion-button>
</ion-footer>

Here is my scss:

ion-content {
    --keyboard-offset: 0px;
  }
  
.background {
    --background: url("/assets/img/background.jpg") no-repeat fixed center;
}

.login-title-text {
    font-weight: bold;
    font-size: 28px;
    padding: 50px 0 20px 30px;
}

.login-subtitle-text {
    font-size: 18px;
    padding: 10px 0 20px 30px;
}

.inputs {
    padding: 30px;
}

.item-input {
    border: 1px solid grey;
    border-radius: 10px;
    height: 50px;
    text-indent: 10px;
    margin-bottom: 20px;
}

ion-footer {
    padding: 30px;

    ion-button {
        margin-bottom: 20px;
    }
}

Answer 1

I finally fixed this issue. I installed the capacitor keyboard package.

npm install @capacitor/keyboard

then navigated to root dir project where the package.json is and ran this command:

npx cap sync

added this in capacitor.config.ts inside the CapacitorConfig object

  plugins: {
    Keyboard: {
      resize: KeyboardResize.None,
    },
  },

then I ran

npm install

might be best to restart simulators after you have done this.