Framework7: Android full screen web app, inputs don't scroll into view on focus

[rozv]

In the android browser the inputs scroll into view only after typing, not on focus, which is ok but when i open it as a full screen web app, the inputs don't scroll into view at all even when typing. The keyboard covers the text. I tried using a scrollto plugin but it doesn't work because the page isn't long enough to scroll the input to the top.

[nolimits4web]

What is Android version and what is the version of browser?

[atukilham]

i have same problem, but this in android device, not browser.
when input in bottom position, android keyboard covers the input.
i try scrolltop, but scrolltop just work with .page-content class, not input.
i think textarea have others problem, when i type more than 73 rows, it's covers by keyboard, i can't see what i typed in textarea.

Input screenshot :

textarea screenshot :

How to make input or textarea's position stay on the top of keyboard when focus or typed ?
I use android lollipop.
thanks.

[tiago580]

I have same problem.

[cande1gut]

Same problem here, tried the scrollTo but no success by the same reason.

[bhumin3i]

@cande1gut i have same problem and also scrollTo is not working for me please let me know if you solve d problem

[bhumin3i]

@atukilham hey man u got d answer?

[cande1gut]

@bhumin3i I got it working with a timeout, since you have to wait for the keyboard to show up, to let the browser calculate the scroll once the keyboard is on screen:

$$("input").on("focus", function(){
setTimeout((function() {
$$('.page-content').scrollTo(0, $$("input").offset().top, 500, function() {
});
}), 500);

[valnub]

Did anyone try requestAnimationFrame() instead of timeout?

If that works, we could add it as a PR.

[mix3d]

@valnub the issue seems to be related to the fact that there is a significant async delay before the keyboard opens and the document is resized. animationframe isn't going to make a difference here. In my own testing, and as reflected in the above suggestions, it does take ~500ms for the keyboard to resize the window.

I imagine you could hook into an on-resize for the document body as a way to trigger the scrollTo, but there'd still be a delay in seeing the keyboard before the scroll happens.

Perhaps an on-focus function that attempts to scroll to the middle of the page as a best-guess, since the body isn't resized until the keyboard is fully visible?

[nolimits4web]

Should be fixed in v2

[juanrapma]

Has anyone been able to solve this problem?

[Jule-]

Still an issue for me in Android.

Maybe there is some prerequisites that I am not fulfilling but if so I can not find them in the doc.
Please, some insights on this one @nolimits4web ?

Thanks!

[nolimits4web]

In Android cordova app, make sure:

You have this preference in config.xml:

<preference name="Fullscreen" value="false" />

Also there could be conflicts with cordova-plugin-statusbar which keep webview from shrinking

[Jule-]

Also there could be conflicts with cordova-plugin-statusbar which keep webview from shrinking

Thanks for this quick and accurate answer! This is indeed the cordova-plugin-statusbar which is preventing my webview from shrinking... :(

Is there some workaround in order to continue using cordova-plugin-statusbar? I have tried android:windowSoftInputMode="adjustPan" with no chance.

[Jule-]

Do not know why but android:fitsSystemWindows="true" is not working either.

[nolimits4web]

This what did trick for me in one of my apps:

window.StatusBar.overlaysWebView(false);
f7.statusbar.hide();
f7.statusbar.show();
f7.statusbar.setBackgroundColor('bf5009')

where f7 is the F7 app instance

[Jule-]

Ok that means that actually we can't use transparent StatusBar with a decent shrink/scroll/padding on keyboard showing. This is due to View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN flag that is incompatible with layout shrink in Android.

I think making android:fitsSystemWindows="true" working would be the best solution since it seems designed to put padding in layout according to system windows but I need a solid example to investigate this behavior.

Thanks again for your answers @nolimits4web!

[josteph]

I have no problem with keyboard on iOS, but this still doesn't solve my issue on android platform when working with the keyboard..

Basically I have:

1. android:windowSoftInputMode="adjustPan"
2. cordova-plugin-statusbar installed
3. App param:

input: {
    scrollIntoViewOnFocus: true,
    scrollIntoViewAlways: true,
    scrollIntoViewCentered: true
},

1. <preference name="Fullscreen" value="false" /> (Android)

Anybody has solution for this? I can't say the solution mentioned in this thread worked well for my case..

Using: Framework7 + Vue v3.4.0

[izukingz]

@nolimits4web ,
The trick you provided will conflict with the statusbar display based on this comment https://github.com/framework7io/Framework7/issues/866#issuecomment-192935192.
Is there any way to get the keyboard fixed and still have the statusbar not covering/adding padding to the header?

Thanks