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 ?
-
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" -
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>
