Framework7: Auto Scroll page-content to keep input always visible when Keyboard is displayed

Created on 2 Oct 2016 · 11Comments · Source: framework7io/framework7

This is a (multiple allowed):

[ ] bug
[X] enhancement
[ ] feature-discussion (RFC)
Framework7 Version: V1.4.2
Platform and Target: Android AND IOS.

There is currently a problem when the user clicks on an input at the bottom of the screen. The keyboard gets displayed but it covers the input that the user clicked on. Only when the user starts typing on the keyboard, the input automatically scrolls up and becomes visible above the keyboard.

It would be nice to have Framework7 automatically handles this issue for all users in a similar way to that of the Ionic framework. With Ionic, a specific keyboard plugin is used.
https://github.com/driftyco/ionic-plugin-keyboard
After installing the plugin, the Ionic framework automatically handles the scrolling for inputs which are at the bottom of the screen.

Enhancement Feature Request

Source

seme1

👍5

Most helpful comment

@bhumin3i @JosephShenton @imac8t @seme1

Here my work around (call it after the fields have been loaded):

_if (!myApp.device.ios) {
$$(page.container).find('input, textarea').on('focus', function (event) {
var container = $$(event.target).closest('.page-content');
var elementOffset = $$(event.target).offset().top;
var pageOffset = container.scrollTop();
var newPageOffset = pageOffset + elementOffset - 81;
setTimeout(function () {
container.scrollTop(newPageOffset, 300);
}, 700);
});
}_

J05HI on 21 Feb 2017

👍4 😄2 🎉1

All 11 comments

i have this problem now

imac8t on 31 Oct 2016

@seme1 https://github.com/driftyco/ionic-plugin-keyboard how it work？

imac8t on 31 Oct 2016

I used this jQuery plugin to automatically scroll to any input by listening to input onFocus events.
https://github.com/flesler/jquery.scrollTo

This has solved all the problems I faced without the need to use the keyboard plugin. The scrollTo plugin attempts to keep the focused input always near the top of the screen. It would be nice if Framework7 has integrated such a function within (or has the option of enabling/disabling this function by simply adding a certain class name to any input).

seme1 on 3 Nov 2016

👍2

Yeah please make that!!!

J05HI on 6 Dec 2016

That would be easy but I have no idea how to make a pull request lol