Input under-scrolling header & not returning using accessory bar

[tomwarham]

I extracted a view from an app I was working in to a fresh ionic project and the bug still exists.

ionic-plugin-keyboard 2.2.0 "Keyboard"

ionic v1.3.1

All when using Accessory bar:

When progressing to a field that is hidden by the keyboard at the bottom the view scrolls to behind the header bar.

When returning back to a previous field no attempt to return the field into the view is made and the input if focused off the top of the screen.

Apologies for the low res gif, full video file at: https://drive.google.com/file/d/0BwXpo6QvBD3VWU5CR2xsMnBMYVU/view?usp=sharing

Used code in the above test environment is: `

```

Ionic Blank Starter

Parent / Guardian Info Parent Guardian Details First Name: Last Name: Contact Number: Extra field: Email:

Nationality:

Select nationality

Language:

Select language

Language:

Select type Address: ```

`

Any help greatly appreciated.

[tlancina]

If you aren't using cordova.plugins.Keyboard.disableScroll(true) try that. If that doesn't work, I'd try overflow-scroll="true" on your ion-content, since the translated scroll view isn't actually scrollable in the browser's mind, so it really messes up the layout to bring the input into view.

[tomwarham]

Adding the overflow-scroll="true" to the ion-content block seems to work, though any fields that are on the border of view / keyboard strangely get doubled up and this stops the input from working screenshot of DOM attached

[tlancina]

Sounds like a bug in the framework. As a workaround though I would try and keep inputs above the keyboard as much as possible, by breaking the different form sections into separate pages.

[MayankLogiciel]

Any other solutions for this problem.. If my input is at bottom of the page, then on focusing it doesn't scroll up into view(above keyboard) automatically in android. Then If i scroll page up then page moved up by some extra space and it never comes down by any mean neither by closing keyboard, neither by scrolling page down manually, nor by clicking somewhere else.

Below settings are in my app.js file for keyboard

        if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);
            cordova.plugins.Keyboard.disableScroll(false);
        }

Below is the structure of my ion-scroll. I am rendering long html content, it may be more than the device screen height. Also i have set contenteditable="true" inside loaded html content.

    <ion-content has-header="true" has-footer="false" scroll="false">
        <ion-scroll ng-if="multiplePagesProposal"
            overflow-scroll="true"
            direction="xy"
            locking="false" 
                   zooming="true" 
            has-bouncing="false"
            scrollbar-x="false"
            min-zoom="zoomOptions.minimumZoom"
                    delegate-handle="zoomScroller"
            class="proposal-ion-scroll proposal-template-scroll">
              <div class="dropzone box box-yellow make-centerestimate-phase3">
                <div class="est-checkbox other-template"  id="{{PROPOSAL_CONTENT_DIV_ID}}"
                    ng-bind-html="multiplePagesProposal.content | trustHtmlFilter">
                </div>
             </div>
        </ion-scroll>
    </ion-content>

[ghost]

This directive fixed it for me:

.directive('form', function () {
      return function () {
        if (window.cordova && window.cordova.plugins.Keyboard && navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
          cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);
        }
      };
    }
  );

[ghost]

I've accomplished a different workaround on this.

angular.module('app')
  .run(function($rootScope, $ionicPlatform, $ionicScrollDelegate){

      $ionicPlatform.ready(function () {
          if (window.cordova && window.cordova.plugins.Keyboard){
              cordova.plugins.Keyboard.disableScroll(true); // This will prevent the view to bounce when inputs are on focus
          }
      });

      $rootScope.$on('$ionicView.loaded', function () {
          if (window.cordova && window.cordova.plugins.Keyboard) {
              cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false); // This makes the accessory bar visible and it only works when the view is loaded and DOM ready
          }
      });

      window.addEventListener('native.keyboardshow', function () {
          $ionicScrollDelegate.scrollBy(0, 1); //This will return focus to the current input once the keyboard slides-up in the view
      });

};)

[stripathix]

@alejandro-heredia-coderoad-com what if I tap in one input field then tab to the second input field. In that case $ionicScrollDelegate.scrollBy(0, 1); this will not work :-(