Ionic Framework Keyboard hides input field

Question

I am having some issues in a form I am creating. This form:

Answer 1

Solved for ionic V1. Just add the fixed as below.

Add "delegate-handle" in the template file.

    <ion-content class="padding" overflow-scroll="false" delegate-handle="myInput">

then add function on input field for animate when keyboard open.

    <input type="text" id="user" ng-model="user" ng-focus="scrollUP(); keyboardFocus('dnsInput');">

Add the injectable dependency inside the controller

    angular.module('starter.user', []).controller('userCtrl', function($scope, $state, $http, $ionicScrollDelegate) {
         ....
         $scope.scrollUP = function () {
             if ( app.isAndroid() ) {
                document.querySelector("#user").scrollIntoView(false);
             }
         }
         $scope.keyboardFocus=function(handleValue){
             if ( app.isAndroid() ) { //check for android platform
                $timeout(function(){
                    $ionicScrollDelegate.$getByHandle(handleValue).scrollBottom();
               }, 500);
             }
          }
    });

Make sure to include the ionic keyboard latest version. currently, I used "com.ionic.keyboard": "2.2.1",

For native scrolling, Add the code in app.js

    .config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
        $ionicConfigProvider.platform.android.scrolling.jsScrolling(true);
    .....
    }

Enjoy..

Answer 2

This is how I solved it:

NOTE: you have to install cordova keyboard plugin (https://github.com/driftyco/ionic-plugin-keyboard)

        var windowHeight = window.innerHeight;

        $scope.$on('$ionicView.loaded', function() {

            // fallback + warning
            var scrollView = {scrollTo: function() { console.log('Could not resolve scroll delegate handle'); }};

            var setupKeyboardEvents = function() {

                $scope.unbindShowKeyboardHandler = $scope.$on('KeyboardWillShowNotification',
                function(info) {

                    var input = angular.element(document.activeElement);
                    var body = angular.element(document.body);
                    var top = input.prop('offsetTop') //+ angular.element(input.prop('offsetParent')).prop('offsetTop');
                    var temp = angular.element(input.prop('offsetParent'));
                    var tempY = 0;

                    while (temp && typeof(temp.prop('offsetTop')) !== 'undefined') {

                        tempY = temp.prop('offsetTop');
                        top += tempY;
                        temp = angular.element(temp.prop('offsetParent'));

                    }

                        top = top - scrollView.getScrollPosition().top;

                        var inputHeight = input.prop('offsetHeight');
                        var keyboardHeight = info.keyboardHeight;

                        var requiredSroll = windowHeight - keyboardHeight > top + inputHeight + 11 ? 0 : windowHeight - keyboardHeight - top - inputHeight - 12;

                        $timeout(function(){ scrollView.scrollTo(0, - requiredSroll || 0, true); });


                });

                $scope.unbindHideKeyboardHandler = $scope.$on('KeyboardWillHideNotification', function() {
                    $timeout(function(){ scrollView.scrollTo(0, 0, true); });
                });

            };

            $timeout(function(){
                var instances = $ionicScrollDelegate.$getByHandle('your-scroll-handle')._instances;
                instances.length && (scrollView = instances[instances.length - 1]);
            }).then(setupKeyboardEvents);

        });

        $scope.$on('$destroy', function(){
            $scope.unbindShowKeyboardHandler();
            $scope.unbindHideKeyboardHandler();
        });

and on application run:

                   window.addEventListener('native.keyboardshow', keyboardShowHandler);
                   window.addEventListener('native.keyboardhide', keyboardHideHandler);

                   function keyboardShowHandler(info){
                       //alert('Keyboard height is: ' + e.keyboardHeight);
                       console.log("KeyboardWillShowNotification: " + JSON.stringify(info));
                       $rootScope.$broadcast('KeyboardWillShowNotification', info);
                   }

                   function keyboardHideHandler(info){
                       $rootScope.$broadcast('KeyboardWillHideNotification', info);
                   }

and in the template:

<ion-content scroll-handle="your-scroll-handle">

Answer 3

Without Using Any Plugin

This worked for me and currently using in more than 10 apps

NOTE : Please specify reason in comment For Vote Down

Just Add style="height: 400px;" in ion-content Its height Of keyboard

  <ion-view view-title="My Page">
    <ion-content>

      Hello!

      <div style="height: 400px;"></div>

    </ion-content>
  </ion-view>

Logic explanation : In Phone or Tablet

<ion-view> Is not Scrollable

But

<ion-content> Is Scrollable

So when you scroll its <ion-content> that scrolls and <ion-view> is DEAD , STIFF Never scrolls

Answer 4

The way that I found was to add the class hide-on-keyboard-open of ionic in all components that doesn't uses the keyboard. So this way I do not need to scroll the page cause with this components hidden I can see all I need to do with the keyboard open.

Answer 5

I was having this exact issue yesterday!

Each of the elements on the page had lots of different padding declarations that were conflicting and this broke my form.

Please try removing all styling from the page to see if this fixes it. If it does, add back the styling element-by-element to pinpoint which one is breaking your form.

Hope this helps!