Recovering From Keyboard Transition

ionic-v1
1

When running my Ionic app on a small screen iOS 6 device (iPhone 4S), the screen height sometimes gets cut off by about 1/3. This happens when submitting information in a form while the keyboard is open and then navigating to a new page.

See this sample:

I’ve tried all sorts of ways to prevent this from occurring:

  • Blur any and all fields on submit
  • Delay the submission of the form many milliseconds until the keyboard has had time to lower
  • Various meta tags for device height and device width.

Nothing works to prevent this. So, now I’m wondering if there is some way just to cause the app to re-initialize after this form problem.

Does anyone have an idea for getting Ionic or Cordova to cause the screen height to recover?

Thanks,
Justin

UPDATE : For now, I’m doing a location.reload() after the form is submitted. It’s pretty ugly, but it works. I’ve spent way too much time trying to solve this. Time to move on.

1 Like
2

Thanks for posting, @Calendee. Might be worth making an issue on our repo…? What do you think @andytjoslin?

3

My suspicion is that it’s setting the scrollTop of your container due to the keyboard coming up (and ionic uses transform, not scrollTop).

Could you try setting overflow-scroll="true" on it and lemme know what happens?

4

In my scenario, that form is inside a SlideBox. That is where most of the pain comes from I think. With the form in a slidebox, the problem happens every single time on iOS 6 iPhone 4S.

I’m in the middle of rewriting the entire onboarding process without the slidebox. Right now, I’ve seen a big improvement. However, I can still cause this to happen by tapping in and out of fields in the form. It’s better, but not perfect.

I dabbled with 2 different sets of Cordova / PhoneGap keyboard plugins to solve the problem. They helped in some ways but caused other problems; so, I gave up on them too.

@pmarchezz How are you set up? Is your form wrapped in a SlideBox or not?

@ben & @andytjoslin : I’ll submit a very crude sample app that demonstrates the problem in a bit.

5

@Calendee nope, just a simple HTML form (although I’m not using Angular, not sure if it matters or not…)

header.bar.bar-header.bar-assertive
    h1.title My title
div.scroll-content.has-header.padding
    div(align="center")
        img(src="my_logo.png")
    h4 Please log in:
    form#login.list
        label.item.item-input
            input(type="text", placeholder="Username", data-bind="...")
        label.item.item-input
            input(type="password", placeholder="Password", data-bind="...")
        button.button.button-block.button-assertive(type="submit") Log in
        button.button.button-block.button-assertive(type="submit") Demo
    div(align="center")        
        button.button.button-small.button-stable(type="submit") Log in as ...

Edited to clean up code…

6

Here’s the sample app : https://github.com/calendee/ionic-keyboard-issues-ios6

It’s basically just the Ionic command line starter app with a really ugly form slapped in to show the problem.

I’ve also included a GIF of the problem in action.

It’d be great if one of you whizzes had a great way around this problem. I’m sort of bypassing it by using cards. With the cards, I can almost always keep the form fields high enough in the viewport that everything doesn’t go all janky - most of the time.

7

@Calendee your GIF reproduces (more or less, see following comment) my issue as well. I also have another problem on the same form: sometimes, when the user taps on the input field(s) to input credentials, the keyboard is shown and then immediately hidden (which causes the problem described above). I’m not entirely sure what is the issue here since it doesn’t happen 100% of the times. However I think it’s connected to the problem described here: when the keyboard is not instantly hidden, the header bar slides in its correct position after pressing “Done”.

8

My suspicion is that the keyboard is setting the scrollTop of the scroll container, and then not unsetting it on submit for some reason.

And we don’t support scrollTop, because we use -webkit-transform to scroll!

Could you try setting overflow-scroll="true" on your scroll around all of this and lemme know what happens?

And if you don’t have time to test it out, could you open an issue?

Thanks!

9

I’ve opened Issue #585.

I added overflow-scroll="true" to the content such as :

<content has-header="true" has-tabs="false" overflow-scroll="true">

This actually stopped all vertical scrolling but causes horizontal scrolling in the form. Unfortunately, it did not solve the problem. Quickly tapping into different fields causes the problem still. It doesn’t happen quite as easily though.

10

I’m still seeing this issue today. Did we come up with a good solution? I’ve tried many viewport meta tag values and other misc. blur fixes but haven’t had any luck.

11

Hi,

I’m not using Ionic, but I had a similar problem today. I solved my problem using “position: absolute” instead of “position: fixed” in my css. Maybe the css of ionic is using position: fixed, for some of the elements in this screen.

I hope it helps =)

12

Do you actually reload the whole page? What about the entered data? Does it get lost?

13

bhserna, I also went with the position absolute on the body and that seems to have fixed it… I don’t know why it was necessarily set to fixed in the first place.

14

Can u share your markup & applied css?

15

I actually just ran into this problem today. Instead of trying to use the overflow-scroll="true", I decided to use <ion-scroll>. Alas, I can’t seem to find a way around it. Not only does my form go, and stay, mostly off the screen, I also can’t scroll to get it back on the screen.

16

Did y’all start your project from the ionic command line or just copy in Ionic code from somewhere else?

If started yourself, you need to be sure to include the Ionic keyboard plugin and device plugin. Otherwise, Ionic can’t manage the view / keyboard combination properly.

finally, your .run needs to look like this:

  .run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      if(window.cordova && window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        window.cordova.plugins.Keyboard.disableScroll(true);
      }
      if(window.StatusBar) {
        StatusBar.styleDefault();
      }
    });
  })
17

iiiinteresting. I started the project from the command line, and my version looked like this:

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      // org.apache.cordova.statusbar required
      window.StatusBar.styleDefault();
    }
  });
})

I’ll try your version.