A little contribution. Temporal fix for resize keyboard (Capacitor) that normally overlap elements

  • For anybody that actually has been working with capacitor.
    In my case when i include the Status Bar API of capacitor the webview doesn’t resize when one element calls a keyboard and overlapping, so the user can’t see what is writting.
    I found this (https://ionicframework.com/blog/keyboard-improvements-for-ionic-apps/). I put in App.vue
    and works perfectly.
    I didn’t test in IOS but i think that actually exist a solution (plugin config on capacitor.config.json).

    My code:

    import { Plugins }  from 'app/src-capacitor/node_modules/@capacitor/core'
    const { Keyboard } = Plugins;
    methods: {
        var input = document.querySelector('#q-app');
        window.addEventListener('keyboardDidShow', (ev) => {
            const keyboardHeight = ev.keyboardHeight
              `translate3d(0,-${keyboardHeight}px, 0)`
        window.addEventListener('keyboardDidHide', () => {

Log in to reply