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

guidobessone

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()
 }