Issue with Ionic Popup in landscape mode

1

Hi guys.

I couldn’t find this issue reported so I thought I’d open a thread. I have a popup with an input box. In portrait this is fine, but in landscape there’s an issue when the keyboard is opened.

(Apologies this is only applicable to a physical device so I am using screenshots instead of code to fiddle with)

Initial view:

When keyboard is opened:

As you can see the popup gets pushed outside the boundary of the view and the keyboard now hides the buttons, the only way to make this function is to enter your text then hit the back button to dismiss the keyboard, then submit. Also note how the tabs are squeezed up to show above the keyboard when the keyboard is opened.

Additional info: Android 4.4, fullscreen set to false in config.xml

If I find a solution I will post it here for anyone who may experience this in the future. If anyone has seen this and resolved it though, I’d be keen to hear how you achieved it.

Many thanks as always for anyone who takes the time to offer some advice :smile:

Ed

2

I had a similar issue with a modal for iPad in landscape mode.

It’s a CSS issue I believe, where when the keyboard pops up, the view size changes. And since the modal / popup is set to top: 20%; bottom 20%, it adjust the modal to the view size and cuts off the modal / popup.

My fix was to do:

@media (max-height: 704px) {
  .modal {
    top: 10%;
    bottom: 0%;
  }
}

This makes sure that when the keyboard pops up, the modal doesn’t shift up by 20%, rather by 0%. I’m not sure how Ionic can fix this without know perhaps what device is being used, and in which orientation, but I would make a PR request.

1 Like
3

Thank you very much for the response and the work around :smile:
Ed

1 Like