Ionic 8 - There is no scroll on page after keyboard opens

Ionic Framework Ionic Angular
1

Hello everyone. Today, after creating a new project (Ionic 8 and Capacitor 7) I started to face this strange behavior/issue.

I just created a simple page with a list (not standalone):

<ion-header>
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content >
  <ion-list>
    <ion-row *ngFor="let input of [1,2,3,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19]">
      <ion-item>
        <ion-input [label]="'Input '+ input  "></ion-input>
      </ion-item>
    </ion-row>
  </ion-list>
</ion-content>

Then, after building and running it on an Android’s device (Android 13), I noticed that that screen is not scrolling when the keyboard opens, as can be seeing below:

WhatsApp Image 2025-03-10 at 15.43.54
WhatsApp Image 2025-03-10 at 15.43.54720×1600 47.6 KB

On the print above, I tapped on the input 17, the keyboard opens above the input and there is no scroll on the screen. I just cannot see the input 17 anymore.

Shouldn’t the screen automatically scrolls and place the input 17 just above the keyboard? What am I missing? I mean, that’s the behavior I’ve always seen before.

Following below are some informations about the project:

package.json

"dependencies": {
    "@angular/animations": "^19.0.0",
    "@angular/common": "^19.0.0",
    "@angular/compiler": "^19.0.0",
    "@angular/core": "^19.0.0",
    "@angular/forms": "^19.0.0",
    "@angular/platform-browser": "^19.0.0",
    "@angular/platform-browser-dynamic": "^19.0.0",
    "@angular/router": "^19.0.0",
    "@capacitor/android": "7.0.1",
    "@capacitor/app": "7.0.0",
    "@capacitor/core": "7.0.1",
    "@capacitor/haptics": "7.0.0",
    "@capacitor/keyboard": "7.0.0",
    "@capacitor/status-bar": "7.0.0",
    "@ionic/angular": "^8.0.0",
    "ionicons": "^7.0.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.15.0"
  },

variables.gradle

ext {
    minSdkVersion = 23
    compileSdkVersion = 35
    targetSdkVersion = 35
    androidxActivityVersion = '1.9.2'
    androidxAppCompatVersion = '1.7.0'
    androidxCoordinatorLayoutVersion = '1.2.0'
    androidxCoreVersion = '1.15.0'
    androidxFragmentVersion = '1.8.4'
    coreSplashScreenVersion = '1.0.1'
    androidxWebkitVersion = '1.12.1'
    junitVersion = '4.13.2'
    androidxJunitVersion = '1.2.1'
    androidxEspressoCoreVersion = '3.6.1'
    cordovaAndroidVersion = '10.1.1'
}

Ionic info

image
image1087×597 19.8 KB

2 Likes
2

I just started migrating from Capacitor version 6 to 7 and I also realized that something similar happened to me.
At first I thought it was something I did not perform correctly to migrate the app. But creating a new project, I realized that the same thing happened to me, while with Capacitor 6 this did not happen.

3

After I’ve upgraded capacitor to v7 I’m running into the same issue on Android 14. And I tried with a new project built with ionic start and that didn’t work either. Keyboard event doesn’t work as expected.

4

I’ve fixed it with capacitor configuration, setting resizeOnFullScreen: true for keyboard plugin. I hope this will help you.

import { CapacitorConfig } from "@capacitor/cli";

const config: CapacitorConfig = {
  ...
  plugins: {
    Keyboard: {
      resizeOnFullScreen: true,
    },
  },
};

export default config;
4 Likes
5

worked for me :grinning_face:
thanks :+1:

Ionic:

Ionic CLI : 7.2.0 (C:\Users\alessio.bongi\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 8.5.3
@angular-devkit/build-angular : 19.2.6
@angular-devkit/schematics : 19.2.6
@angular/cli : 19.2.6
@ionic/angular-toolkit : 12.1.1

Capacitor:

Capacitor CLI : 7.2.0
@capacitor/android : 7.2.0
@capacitor/core : 7.2.0
@capacitor/ios : 7.2.0

Utility:

cordova-res : not installed globally
native-run : 2.0.1

System:

NodeJS : v20.14.0 (C:\Program Files\nodejs\node.exe)
npm : 10.9.1
OS : Windows 10