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