Soft keyboard pushes up view behind popup-push popups

Questions
1

IMG_0413.PNG
IMG_0413.PNG1125×2436 227 KB

The soft keyboard pushes up the view behind. Any way I can style this to prevent this from happening?

1 Like
2

I faced exactly the same problem. @nolimits4web Do you have any idea? I can’t easily find the exact reason or CSS to fix this.

Not a real show stopper but it just doesn’t look nice :slight_smile: Can be worked around by using a regular popup instead of push-popup, but I really like the push version.

3

Not an easy fix, will address it i think in v6 already

4

@nolimits4web any news on this? This still happens to me with the latest version.

5

My current Workaround is to disable the page shrink in capacitor and add a bottom padding to the current page which is exactly the same height as the keyboard.

plugins: {
  Keyboard: {
    resize: "none",
  },
}

I call the following function once in an useEffect hook on app start:

import { Keyboard } from '@capacitor/keyboard'
import { Capacitor } from '@capacitor/core'

export async function addKeyboardListenerForPageShrink() {
  if (Capacitor.getPlatform() === 'web') {
    return
  }

  await Keyboard.addListener('keyboardDidShow', (info) => {
    const pages = document.querySelectorAll<HTMLDivElement>('.page')
    pages.forEach((page) => {
      page.style.paddingBottom = `${info.keyboardHeight}px`
    })
  })
  await Keyboard.addListener('keyboardWillHide', () => {
    const pages = document.querySelectorAll<HTMLDivElement>('.page')
    pages.forEach((page) => {
      page.style.paddingBottom = `0px`
    })
  })
}
1 Like