Scroll problem with virtual keyboard on mobile



  • I have the input that is nearly the bottom screen, after I focus on the input then the virtual keyboard display overlap the input field. I already try to use scrollIntoView of input or reset scrollTop of container but the virtual keyboard continue overlap, any one have any idea ?


  • Admin

    Hi, any repo I can take a look into? Also, what mobile platform are you using (and version)?



  • Hi @rstoenescu ,
    I create web app, try simulator is ok, but the problem occur when I try with mat style on chrome browser in Nexus 7"


  • Admin

    I am interested in the exact code, that’s why I was asking.



  • @rstoenescu
    I cannot publish repo :( I create the component that wrap layout component to reuse, and then I use wrap layout to display the setting page, I just give the example as below:

    <q-layout>
    <!-- Header -->
    <div slot=“header” class=“toolbar”>
    <q-toolbar-title class=“uppercase”>
    <div class=“float-left text-italic”>{{ $t(‘project.title’) }}</div>
    <div class=“text-center”>{{ title }}</div>
    </q-toolbar-title>
    </div>
    <top-bar></top-bar>

    <!-- Content -->
    <div class=“layout-view”>
    <div class=“setting-container”>
    <p class=“caption sub-title text-tertiary”>CAPTION 1 </p>
    <div class=“setting-content”>
    <div class=“row”>
    <span class=“setting-icon”><img :src="/statics/icon/abc.png"></span>
    <span class=“auto text-tertiary”>abc</span>
    <span class=“float-right”><q-toggle v-model=“settings.abc” ></q-toggle></span>
    </div>
    <div class=“row”>
    <span class=“setting-icon”><img :src="/statics/icon/123.png"></span>
    <span class=“auto text-tertiary”>123</span>
    <span class=“float-right”><q-toggle v-model=“settings.123” ></q-toggle></span>
    </div>
    <div class=“row”>
    <span class=“setting-icon”><img :src="/statics/icon/456.png"></span>
    <span class=“auto text-tertiary”>456</span>
    <span class=“float-right”><q-toggle v-model=“settings.456” ></q-toggle></span>
    </div>
    </div>
    </div>
    <div class=“setting-container”>
    <p class=“caption sub-title text-tertiary”>CAPTION 2 </p>
    <div class=“setting-content”>
    <div class=“row”>
    <span class=“setting-icon”><img :src="/statics/icon/abc.png"></span>
    <span class=“auto text-tertiary”>abc</span>
    <span class=“float-right”><q-toggle v-model=“settings.abc” ></q-toggle></span>
    </div>
    <div class=“row”>
    <span class=“setting-icon”><img :src="/statics/icon/123.png"></span>
    <span class=“auto text-tertiary”>123</span>
    <span class=“float-right”><q-toggle v-model=“settings.123” ></q-toggle></span>
    </div>
    <div class=“row”>
    <span class=“setting-icon”><img :src="/statics/icon/456.png"></span>
    <span class=“auto text-tertiary”>456</span>
    <span class=“float-right”><q-toggle v-model=“settings.456” ></q-toggle></span>
    </div>
    </div>
    </div>


    <div class=“setting-container”>
    <p class=“caption sub-title text-tertiary”>CAPTION B </p>
    <div class=“setting-content”>
    <div class=“row”>
    <span class=“setting-icon”><img :src="’/statics/icon/aaa.png’"></span>
    <span class=“auto”>
    <input v-model.trim=“settings.aaa” class=“text-center” maxlength=“11”
    @focus="$event.target.scrollIntoView(true)">
    </span>
    <span class=“float-right”><q-toggle v-model=“settings.aaa”></q-toggle></span>
    </div>
    <div class=“row”>
    <span class=“setting-icon”></span>
    <span class=“auto text-tertiary”>Title yyy</span>
    <span class=“float-right”><q-toggle v-model=“settings.yyy”></q-toggle></span>
    </div>
    </div>
    </div>
    <div class=“setting-container”>
    <p class=“caption sub-title text-tertiary”>CAPTION LAST</p>
    <div class=“setting-content”>
    <div class=“row”>
    <span class=“setting-icon”><img :src="/statics/icon/eee.png"></span>
    <span class=“auto text-tertiary”>eee</span>
    <span class=“float-right”><q-toggle v-model=“settings.eee” ></q-toggle></span>
    </div>
    <div class=“row”>
    <span class=“setting-icon”><img :src="/statics/icon/fff.png"></span>
    <span class=“auto text-tertiary”>fff</span>
    <span class=“float-right”><q-toggle v-model=“settings.fff” ></q-toggle></span>
    </div>
    </div>
    </div>
    </div>
    <!-- Footer -->
    <footer-bar"/>
    </q-layout>


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.