No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Useful Tips (NEW)
    1
    1
    355
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • G
      guidobessone last edited by

      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()
       }
      
      1 Reply Last reply Reply Quote 0
      • First post
        Last post