Quasar: Mobile keyboard over text field

[george-dragnea]

Greate job for making this framework.

If the input is placed at the bottom of the page, when I press on it the android keyboard appear over that text field.

[rstoenescu]

Known issue but hard to fix due to the way mobile OSes handle the keyboard. This will be fixed into a Layout revamp in the near future.

[george-dragnea]

Until this issue get fixed, you know some workaround ? Because I my app have multiple forms and I can't use the framework.
I have tried to addEventListener('click' on all input and use javascript function window.scrollTo to scroll, but with no success. On the same ideea I have tried to use https://github.com/rigor789/vue-scrollTo , but still nothing happens.

[rstoenescu]

You may want to add a bottom padding to the container of your form.

[george-dragnea]

That was the first thing I have tried, but I don't know why it doesn't work, because that should be by default, how it works on every website.

I have open this link: http://quasar-framework.org/quasar-play/android/index.html#/showcase/form/text-input/textbox
And if I press on "floating label" which is at the bottom of the screen, the keyboard opens but no scroll.

I have nexus 5x.

[rstoenescu]

The Quasar Layout is very complex to allow ease of use for positioning header/footer/fabs/drawer automatically without you taking care of it. It's a very long talk. It positions itself as fixed, so scrolling does not occur on the window, but on the Layout auto-overflown divs.
There are a few issues with the mobile keyboard on every framework. But Quasar will fix your issue too ;)

[jonafrankbrimma]

Hi @george-dragnea We faced the same issue, To resolve this i made the input box as a flex container(parent div as flexbox) , Now it automatically reflows to the top of the screen when the keyboard comes up.

[george-dragnea]

@jonafrankbrimma I have tried something but it didn't work. Can you be more specific or show some code ? Thanks.

[jonafrankbrimma]

<template>
  <div class="layout-padding container fullscreen">
    <div class="logo-box"></div>
    <div class="login-form">
      <form  @submit.prevent="submit">
        <div>
          <input placeholder="Username" class="full-width">
          <input placeholder="Password" class="full-width">
        </div>
        <div class="submit">
          <button class="full-width" type="submit"><strong>Login</strong></button>
        </div>
      </form>
    </div>
    <div class="options">
      <span><u><a>Forgot Password?</a></u></span>
      <span class="pull-right"><u><a>New Here? Signup</a></u></span>
    </div>
    <div class="footer">
      By continuing you agree to our <u><a>Terms</a></u> and <u><a>Privacy Policy</a></u>
    </div>
  </div>
</template>
<style scoped>
  .container{
    display: flex;
    flex-flow: column;
  }
  .logo-box{
    display: flex;
    flex-flow: column;
    justify-content: center;
    width: 200px;
    height: 200px;
  }
  .login-form{
    padding: 20px;
    margin-top: 25px;
  }
  input{
    border-bottom: 1px solid white !important;
    margin:20px;
  }
  input::placeholder{
    font-size: 1em;
    font-weight: lighter;
  }
  .submit{
    border-radius: 20px;
    margin-top: 40px;
  }
  .options{
    margin: 4.5% 5% 5% 5%;
    font-size: 0.8em;
  }
  .footer{
    font-size: 0.7em;
    text-align: center;
    position: absolute;
    bottom: 12px;
    left: 0px;
    right: 0px;
  }
</style>

I have stripped out the contents , but this is how i have designed it, Now the input box reflows to the top when the keyboard comes up.

[rstoenescu]

Fixed in future v0.14 as part of Layout changes.

[tondakal]

Hi. Look at this. I know, it's not clean solution, but it works.

1. install cordova plugin, which add 'native.showkeyboard' event to your app.
   cordova plugin add ionic-plugin-keyboard --save
   (maybe you will need https://www.npmjs.com/package/vue-cordova too for 'deviceready' event. I'm not sure)

2. then update your Vue created method

Quasar.start(() => {
...
 new Vue({
 ...
  created: function () {
   this.cordova.on('deviceready', () => {
    window.addEventListener('focusin', (e) => {
     if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
      var input = e.target
      window.addEventListener('native.showkeyboard', (e) => {
       input.scrollIntoView(false)
     }, {once: true})
    }
   })
  }
 }
})
})