Last Updated: February 25, 2016
·
1.061K
· tmpduarte

[Fix] Keyboard hides input elements with Lungo

I was developing a app where I used Lungo, Angular and Lungo-Angular-Bridge between the two and I stepped into a problem where the keyboard was hiding input fields when the user taped the input field.
The expected behaviour was that the form scrolled up until the input field was visible in the screen.

With the help of Mr. @otupman we came up to a directive that looks like this

directives.directive('softkeyboard', [function() {
    return {
        restrict: 'C',
        replace: false,
        transclude: false,
        link: function(scope, iElement, iAttrs) {
            iElement.bind('focus' ,function() {
                setTimeout(function() {
                    iElement[0].scrollIntoView();
                }, 1000);
            });
        }
    };
}]);

Every input field that might be hidden by the keyboard we just need to add a class="softkeyboard". What the directive does is just scroll the input element to the top of the screen.

If you are questioning yourself about the timeout we also do, although we have a possible explanation for that: we need to wait until the keyboard comes up and the browser recalculates the viewport.