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: {
      keyboardConf(){
        var input = document.querySelector('#q-app');
        window.addEventListener('keyboardDidShow', (ev) => {
            const keyboardHeight = ev.keyboardHeight
            input.style.setProperty(
              'transform',
              `translate3d(0,-${keyboardHeight}px, 0)`
              //`translateY(-${keyboardHeight}px)`
            );
          });
        window.addEventListener('keyboardDidHide', () => {
          input.style.removeProperty('transform');
        });
      }
      },
    
    mounted(){
       this.keyboardConf()
     }
    

Log in to reply