IOS Keyboard click outside page jump (video)


#1

Hello,

Check out the following video: https://vimeo.com/161755036

First 2 times i am using the Done button from the keyboard to close the keybord which works very nice. The next 2 times i am clicking on the first input, which is a readonly input so i cannot focus. If you see, the keyboard gets closed but the entire page jumps a little. Take a look at the top header bar.

This its a blank ionic 2 application started with command
ionic start testinput blank --v2 --ts

Here is the ionic info
Cordova CLI: 6.1.1
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.3
Ionic CLI Version: 2.0.0-beta.24
Ionic App Lib Version: 2.0.0-beta.14
ios-deploy version: 1.8.5
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v4.4.1
Xcode version: Xcode 7.3 Build version 7D175

This recording was done directly from an Iphone 6 IOS 9.3

The page contains simple elements inside a ion-content

Is there something i can do about this? This happens each time you click outside of an input element. Even a button will behave like that.


#2

Did you tried to disable scroll? Please check: https://github.com/driftyco/ionic-plugin-keyboard#keyboarddisablescroll


#3

I dont wanna disable the scroll, i need the scroll :slight_smile: There are a lot of inputs on the page. And there are also some other button you can click on.


#4

So @sava999 mean to disable the scroll from the UIwebview and the keyboard, not scrolling inside the ionic app.

This would prevent the exact issue you’re video shows.


#5

Could you give a code example with ionic 2?

I know is necessary add plugin, but i don’t know what do after this.
How execute cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false); ? Need import ?


#6
import 'es6-shim';
import {App, Platform} from 'ionic-angular';
import {StatusBar,Keyboard} from 'ionic-native';
import {HomePage} from './pages/home/home';


@App({
  template: '<ion-nav [root]="rootPage"></ion-nav>'
})
export class MyApp {
  rootPage: any = HomePage;

  constructor(platform: Platform) {
    platform.ready().then(() => {
      Keyboard.disableScroll(true)
      StatusBar.styleDefault();
    });
  }
}

#7

In this case, input in bottom toolbar is not showing during keyboard is open :disappointed:


#8

There is no keyboard attach directive ATM, so that would explain that. You could attempt to cover the v1keyboard-attach directive for v2?


#9

If you click the Done button everything works nice, but put one of your input as readonly and after you open the keyboard click the readonly input and you will see the jump. On my video, the first 2 times i am click the Done button. After that i am clicking the readonly input and you can see the jump.


#10

Found a fix for this. Looks like its beacuse the position: fixed on the body element. I set this inside my core css:

body {

position:absolute;
overflow: auto;
width:100%;
height:100%;
}

Now, when keyboard opens and close there is no page jump. Not really sure how this will affect other stuff, but it works for me great,


#11

I am using Ionic Beta.9 and still the same problem.

Any better fix?