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">Wele 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;
    }
}

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">Wele 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;
    }
}

• javascript
• angular
• ionic-framework
• hybrid-mobile-app

Share Improve this question Follow asked Jul 29, 2022 at 8:45 jo1jo1 17544 silver badges1616 bronze badges 4

• this is default behavior of OS. if you content not get pushed upside how user will click on next input? – Najam Us Saqib Commented Jul 31, 2022 at 13:10
• okay that makes sense - but what happens if i have a screen that has a list in it, when the search bar is clicked and keyboard displays, obviously the whole list wont be pushed up - the keyboard should overlap the content and not push it up, if that makes sense – jo1 Commented Jul 31, 2022 at 17:47
• then check your css. you might be using some kind of CSS to pushing content upside. Can you make stackblitz for this issue. – Najam Us Saqib Commented Aug 1, 2022 at 7:22
• content pushing works only when your input is in lower part of your screen i.e in place of keyboard then OS pushes your content upside for users to see. but if your search bar in upper part of screen keyboard will overlap the content. – Najam Us Saqib Commented Aug 1, 2022 at 7:32

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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 mand:

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.

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.