CODEWITHSUNDEEP
iosangularionic-frameworkkeyboardcapacitor
Jan1105
Jan1105

Reputation: 31

Ionic Keyboard hides content when switching between multiple inputs

I am currently testing my login page of my Ionic Angular project on my mobile phone. I discovered that selecting an ion-input moves the content up according to the keyboardheight property. This prevents the content from being covered up by the keyboard.

The Problem occurs when the keyboard is already opened because of a focused input and you click another input. After the input has switched the keyboardheight is printed as 0 and the content is reset to the center of the screen resulting in content being covered up by keyboard not able to be scrolled above the keyboard.

I am testing currently on my iPhone 11 (Nexus Browser) and using Ionic v7.

I already tried installing the Capacitor Keyboard Plugin and using this config:

  "plugins": {
    "Keyboard": {
      "resize": "body",
      "style": "DARK",
      "resizeOnFullScreen": true
    }
  }

Normally the Keyboard should be shown and the content still be lifted above the keyboard.

Upvotes: 2

Views: 1208

Answers (1)

hvma411
hvma411

Reputation: 379

You are probably talking about this bug from here.

This problem is already fixed and you can just update your Ionic project or just Ionic Capacitor Plugins.

Install latest capacitor cli in your project:

npm i -D @capacitor/cli@latest

Migrate your project by using:

npx cap migrate

During second point you should be asked if you would like to let migrator to run npm/yarn/pnpm install to install the latest versions of capacitor packages. Type 'y' and select your preferred packages manager to install latest versions of packages.

Official capacitor docs with how to update here -> click

Upvotes: 0

Related Questions