keyboard pushes content upwards with ionic-CodePudding

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  [fullscreen]="true" slot="fixed">
  <h1 >ign you in</h1>
  <p >Welcome back!</p>

  <div >
    <ion-input  type="email" placeholder="Email"></ion-input>
    <ion-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;
    }
}

CodePudding user response：

You need to import the keyboard package into your .ts file

import { Keyboard } from '@ionic-native/keyboard/ngx';

Then you need to add an event to your input element

(onShown)="hideKey()" <-- it depend on the input element, this eg., is taken from calendar control onShow

Below is the code to hide the keyboard

hideKey() {
    setTimeout(() => {
      this.keyboard.hide();
    }, 500);
  }

I hope this solution will help you

Thanks.

CodePudding user response：

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.