Ionic-framework: bug: Bug: iOS Input in popup hidden by keyboard (Ionic Keyboard)

[cmellinas]

Type: bug

Platform: ios 8 webview

Hello,

When using ionic Keyboard with cordova.plugins.Keyboard.disableScroll(true);

And using the Ionic doc Popup (first example) : http://ionicframework.com/docs/api/service/$ionicPopup/

There is an issue with the input only on IOS, the keyboard hides the input (it's not the case for modals or views inputs, only for popups).

Temporary solution : using cordova.plugins.Keyboard.disableScroll(false) when the popup show
And reuse cordova.plugins.Keyboard.disableScroll(true) when the popup is closed

I use the last plugins versions (ionic 1.1.0 and Keyboard 1.0.5)

[jwt02180]

Hi,

I am using iOS 9.1 webview.

I also have the ionic Keyboard plugin configured the same way, and the $ionicPopup with an input is hidden by the keyboard. I do not have this issue on android.

I have come to the same temporary solution as @mellinas, which is undesirable as it makes the whole view (nav-bar included) scroll-able while the popup is open.

I'm using ionic v1.1.0 and Keyboard v1.0.6

[bdoooh]

I'm also experiencing this bug, using the same fix as @cmellinas as well.

[jordantomax]

+1

[tgensol]

+1

[johnnyoin]

If found a less undesirable way to work around this issue by manually moving the popup when the keyboard appears:

JS:

if (cordova.platformId === 'ios') {
   window.addEventListener('native.keyboardshow', function () {
      movePopupFromContainerList(document.getElementsByClassName('input-popup popup-container'), true);
   }
   window.addEventListener('native.keyboardhide', function () {
      movePopupFromContainerList(document.getElementsByClassName('input-popup popup-container'), false);
   }

   function movePopupFromContainerList(list, up) {
      if (list.length) {
         var popup = list[0].childNodes[0];
         popup['style'].bottom = up ? '130px' : '0px';
      }
   }
}

this.$ionicPopup.prompt({
   title: ...,
   ...,
   cssClass: 'input-popup'
});

CSS:

.platform-ios {
  .input-popup.popup-container .popup {
    position: relative;

    -webkit-transition: bottom 0.3s ease-in-out 0s;
    transition: bottom 0.3s ease-in-out 0s;
  }
}

[jgw96]

Hello all! Is this still an issue with the latest version of ionic? Thanks!

[johnnyoin]

@jgw96 Yes this is still an issue.

[AdrienDC]

+1, super annoying ...

[przemkow]

+1

[Ionitron]

Greetings @cmellinas!

My sensors indicate a reply was requested, but as we have not received one yet, I am using my robot powers to close this issue. However, if you are still experiencing this issue, please feel free to reopen it by creating a new issue, and include any examples or necessary information.

Thank you for allowing me to assist you.

[jordantomax]

Still a problem, please reopen.

[slorber]

+1

[douglasjunior]

+1

[luco]

+1

[marcioibm]

+1

[wcustodio]

+1

[BraveVN]

+1.
I'm not facing that problem with popup but I have issue when open keyboard in a long form, the keyboard overlap the form and I can not scroll.
I try to use cordova.plugins.Keyboard.disableScroll(false) but sometimes it works, sometimes not.
Please fix it.

[mashah1]

Hi All, I am also facing same issue, when popup is shown, the keyboard gets opened which hides the input field. Any solution please? Thanks

[suiz0]

Same issue, is this fixed?

[fmoutawe]

Still occured..

A tricky solution to fix it :

.platform-ipad.keyboard-open {
    .popup-container {
        padding-top: 50px;
        align-items: flex-start;
    }
}

[BraveVN]

@Ionic team: Are you guys still working with it ?

[sminthsonth]

it is definitely an issue, +1

[alexgalkin]

Issue is still valid

[Rambatino]

@jgw96 can this be reopened as it is still an issue with rc 3

[lehresman]

@ivelfan has the right solution. This worked like a charm. Thanks!

[Nightbr]

This is still an issue in ionic 1.3.2
@ivelfan's fix should be add to the ionic main CSS ?

[AshleyDeng]

In most cases, using Ionic is a pleasant. But when it comes down to some minor yet annoying bugs, sometimes it would not be fixed or acknowledged. Another example is iOS input cursor bugs.

Frustrated indeed.

[ghost]

did someone find a workaround to fix this ?

[pavelety]

.platform-ios.keyboard-open .popup-container {
padding-top: 50px;
align-items: flex-start;
}

[sohandhaindwal]

Same issue is here. I have study on that but not correct solution yet. I saw Ionic team is not noticed that point. I found that ionic UI is not good for IOS , lots of issues are coming in IOS. very bad experience with ionic . from last two months I am finding the that issue solution but .......Somebody have any solution. please help me my app almost complete but without that its not done . I am using ionic1. I am set chat input into footer bar when i focus on input then keyboard covered my input . Please help me. ionic team please fixed that issue.

[DenisTis]

The solution proposed does not solve the issue completely:
.platform-ios.keyboard-open .popup-container {
padding-top: 50px;
align-items: flex-start;
}

Once keyboard is displayed, it puts additionally whole "view-container" to the top, overlaying ios toolbar with battery indicator, etc.
Once keyboard is hidden, "view-container" does not come back and stays overlayed. Very annoying.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.