Skip to content

[Bug]: Extra spacing above the keypad #8412

@merbin2012

Description

@merbin2012

Capacitor Version

PS C:\Users\merbi\Desktop\project> npx cap doctor
Capacitor Doctor

Latest Dependencies:

@capacitor/cli: 8.3.0
@capacitor/core: 8.3.0
@capacitor/android: 8.3.0
@capacitor/ios: 8.3.0

Installed Dependencies:

@capacitor/cli: 8.3.0
@capacitor/core: 8.3.0
@capacitor/android: 8.3.0
@capacitor/ios: 8.3.0

[success] Android looking great! 👌

Other API Details

PS C:\Users\merbi\Desktop\project> npm --version 
11.11.0
PS C:\Users\merbi\Desktop\project> node --version
v24.12.0

Platforms Affected

  • iOS
  • Android
  • Web

Current Behavior

While open the keypad, it show extra more space above the keypad.

It works well if im not set the following

"Keyboard": {
      "resizeOnFullScreen": true
    },

I need to set it, otherwise all the contents are scrolled up.

Image
Image

Expected Behavior

The extra space should not show.

Project Reproduction

https://github.com/merbin2012/keypad-blank-space

Additional Information

I have fixed through the following changes in Capacitor/node_modules/@capacitor/android/capacitor/src/main/java/com/getcapacitor/plugin/SystemBars.java

            if (shouldPassthroughInsets) {

                // We need to correct for a possible shown IME
                v.setPadding(0, 0, 0, keyboardVisible ? imeInsets.bottom : 0);

                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.VANILLA_ICE_CREAM && hasViewportCover && insetHandlingEnabled) {
                    Insets safeAreaInsets = calcSafeAreaInsets(insets);
                    injectSafeAreaCSS(safeAreaInsets.top, safeAreaInsets.right, safeAreaInsets.bottom, safeAreaInsets.left);
                }

                return new WindowInsetsCompat.Builder(insets)
                        .setInsets(
                                WindowInsetsCompat.Type.systemBars() | WindowInsetsCompat.Type.displayCutout(),
                                Insets.of(
                                        systemBarsInsets.left,
                                        systemBarsInsets.top,
                                        systemBarsInsets.right,
                                        getBottomInset(systemBarsInsets, keyboardVisible)
                                )
                        )
                        .build();
            }

TO

            if (shouldPassthroughInsets) {
                // We need to correct for a possible shown IME
                // If we are passing insets to the WebView, we typically don't want
                // the parent View to have padding, otherwise the WebView is pushed
                // up by the padding, AND its internal CSS is pushed up by the inset.
                v.setPadding(0, 0, 0, 0);

                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.VANILLA_ICE_CREAM && hasViewportCover && insetHandlingEnabled) {
                    Insets safeAreaInsets = calcSafeAreaInsets(insets);
                    injectSafeAreaCSS(safeAreaInsets.top, safeAreaInsets.right, safeAreaInsets.bottom, safeAreaInsets.left);
                }

                return insets; // Pass the raw insets so the WebView handles the keyboard space internally
            }

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions