ionic html5 select/keypad open, scroll the view and tab to upward and create empty space after tab on iOS

Question

I am using ionic v1 with angularJS and I have ion tabs:

<ion-tabs class="tabs-icon-top tabs-color-active-positive">

  <!-- Home Tab -->
  <ion-tab icon-off="ion-home" icon-on="ion-home" href="#/tab/home">
    <ion-nav-view name="tab-home"></ion-nav-view>
  </ion-tab>

  <!-- Calendar Tab -->
  <ion-tab icon-off="ion-calendar" icon-on="ion-calendar" href="#/tab/calendar">
    <ion-nav-view name="tab-calendar"></ion-nav-view>
  </ion-tab>
</ion-tabs>

In calendar tab I have html option as follows:

<select ng-options="x for x in $ctrl.startTimes"></select>

When the select menu opens, the view scroll to upward and creates empty space under ion-tabs.

How can I move the view to initial position as before the select menu opens?

I. Ahmed · Accepted Answer · 2018-05-28T08:27:28.247

Finally, I able to find one workaround solution, It still have some minor issue. To solve it I do the following:

First: In app.js I disable the scroll as follows:

if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.disableScroll(true);

}

Second: Register the keypad hide event, it will fire keyboardHideHandler when keypad or select control close:

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

Third: Implement keyboardHideHandler as follows. After implementing all the issue occurred only first time, so you have to use the flag isFirstTimeEdit:

var isFirstTimeEdit = true; 
function keyboardHideHandler(e){
      if(isFirstTimeEdit) {
        isFirstTimeEdit = false;

        if(window.scrollY >= 20) {
          document.body.style.marginTop = "20px";
        }
      }
      window.removeEventListener('native.keyboardshow', keyboardShowHandler);
}

ionic html5 select/keypad open, scroll the view and tab to upward and create empty space after tab on iOS

1 Answers1