Phonegap: Keyboard changes window height in iOS 7

Question

In iOS 6 everything works fine. The keyboard opens and moves the input into view. When the keyboard closes everything goes back where it should.

In iOS 7 the keyboar

Answer 1

I had the same problem and I managed to track it down to dynamic content. I had initially an empty div that was filled with text using javascript. When I pre filled the div with static text the problem was gone.

Looks like this div's height was not counted when resizing.

Answer 2

The Petrash's solution worked for me. But I had still problems supporting rotations on iPad. So, in the same CDVViewController.m I've added this method:

- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation
{
    [super didRotateFromInterfaceOrientation:fromInterfaceOrientation];
    if (self.webView){
        CGRect newFrame = self.webView.bounds;
        //NSLog(@"%f" , newFrame.size.height);

        NSString *JS =  [NSString stringWithFormat:@"viewport = document.querySelector('meta[name=viewport]'); viewport.setAttribute('content', 'user-scalable=no, initial-scale=1.0, maximum-scale=1, minimum-scale=1, width=device-width, height=%d,  target-densitydpi=device-dpi');",  (int) newFrame.size.height*1 ];

        [self.webView stringByEvaluatingJavaScriptFromString:JS];
    }

}

and, to support the "non scale" behaviour, edited the Petrash's solution in this way:

CGRect newFrame = self.webView.bounds;
    //NSLog(@"%f" , newFrame.size.height);

    NSString *JS =  [NSString stringWithFormat:@"viewport = document.querySelector('meta[name=viewport]'); viewport.setAttribute('content', 'user-scalable=no, initial-scale=1.0, maximum-scale=1, minimum-scale=1, width=device-width, height=%d,  target-densitydpi=device-dpi');",  (int) newFrame.size.height*1 ];

    [self.webView stringByEvaluatingJavaScriptFromString:JS];

KeyboardShrinksView = false

This is hacky, but it works from 5.1 to 7.0.3. Tested on Cordova 3.0.

Answer 3

I was seeing this too. After the height changes, some of our absolute positioned elements disappear off the bottom of the screen.

I found that with KeyBoardShrinksView = false in ios7, window.height stayed constant. This was the opposite of ios6 though, so a bit of a catch 22.

Not sure if there's a better way of handling this in Phonegap, but I put this in CDVViewController.m, created to config.xml files for ios < v7 and ios > v6, and my app works the way I want. Seemed a bit hacky, but not too disruptive of the rest of my code.

// read from config.xml in the app bundle
NSString* path = [[NSBundle mainBundle] pathForResource:@"config" ofType:@"xml"];

if (IsAtLeastiOSVersion(@"7.0")) {
    path = [[NSBundle mainBundle] pathForResource:@"config_ios7" ofType:@"xml"];
}

(I also tried an app preference plugin at https://github.com/phonegap/phonegap-plugins/tree/master/iPhone/ApplicationPreferences but don't think this was designed for this kind of preference.)