Bug with iOS7 showing the soft keyboard with phonegap and Intel App Framework

Question

I use the excellent Intel AppFramework for the UI of my phonegap / cordova apps, but since iOS7, sometime, when I open the keyboard, the bottom menu goes up (it should not): http://screencloud.net/v/9omt And then, when I close the keyboard, the bottom menu stay in the middle of the screen: http://screencloud.net/v/DgRf

It looks like the bug is in the hideAddressBar function. I disabled the function, and now, the menu always goes up, but at least, it always goes done when I close the keyboard.

(we use the 1.0 version. We plan to update soon, but we are in the middle of an urgent release)

Thanks in advance for any help or directions,

Samuel · Answer 1 · 2013-10-04T16:41:08.057

9

This solution worked for me. I had the following meta tag in my index.html:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

And I change it to this:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />

The most important attribute is height=device-height, it says that the view size will always be the size of the device.

Edit: there is a bug with the iPad in landscape and iOS7. The CSS sizes of the viewport are wrong...

edited Oct 04 '13 at 16:41

answered Sep 24 '13 at 18:38

Samuel

5,439
6
31
43

Thanks for adding the solution. I had the same problem with my own html5 framework and this meta tag fixed it. – Franziskus Karsunke Sep 27 '13 at 11:54
@Samuel: Thanks. Regarding iPad bug, I observed that after setting height=device-height, viewport height is always 1024 regardless of orientation. Did you face the same issue? Did you find fix for it? – Nilesh Jan 29 '14 at 00:37

score 0 · Answer 2 · answered Sep 23 '13 at 20:38

I'm in the same boat as you and trying to figure out a working solution. I am working with one of the main ios phoengap contributers over here: https://issues.apache.org/jira/browse/CB-3020

He posted an updated solution and 3.1 should be coming out soon with the patched fixes.

I'm still running into some issues and have the black bar at the bottom randomly showing on certain pages.

Head over to the cordova jira site and add in your testing details to help out.

Thanks!

Thanks for the link. I use Cordova 2.8, and the meta viewport did the trick. — Samuel, Sep 24 '13 at 18:39

score 0 · Answer 3 · edited May 23 '17 at 12:14

While the Samuel's response should fix the problem, it will create other side effects. For example in Phonegap 3.3 adding height=device-height to viewport, you would get scroll in every screens (even when the elements on the page are not big enough to full the screen). In our case the only solution ,found here, was add a notification handler to the open keyboard on Phonegap which calls to a javascript function, and then hide the fixed footer on this function, besides hide/show the footer again in focus/blur functions. An example using jquery mobile is attached, but you could update it to use a different framework:

On javascript:

  $(document).on('focus','input, select, textarea',function() {
    if( device.platform=== 'iOS' && parseInt(device.version.substring(0,1)) >= 7){
        if($(this).attr('readonly')===undefined){
            $("[data-role=footer]").hide();
        }
    }  
  });

  $(document).on('blur','input, select, textarea',function(){
    if( device.platform=== 'iOS' && parseInt(device.version.substring(0,1)) >= 7){
        if($(this).attr('readonly')===undefined){
            $("[data-role=footer]").show();
        }
    }
    setTimeout(function() {
        window.scrollTo(document.body.scrollLeft, document.body.scrollTop);
    }, 0);
  });

  function hideFooter(){
    if( device.platform=== 'iOS' && parseInt(device.version.substring(0,1)) >= 7){
        if($(this).attr('readonly')===undefined) {
            $("[data-role=footer]").hide();
        }
    }
  }

And in phonegap MainViewController.m:

- (id)init
{
    self = [super init];
    if (self) {
        // Uncomment to override the CDVCommandDelegateImpl used
        // _commandDelegate = [[MainCommandDelegate alloc] initWithViewController:self];
        // Uncomment to override the CDVCommandQueue used
        // _commandQueue = [[MainCommandQueue alloc] initWithViewController:self];
        }

    //fix for ios7 footer is scrolled up when the keyboard popsup.
    [[NSNotificationCenter defaultCenter] addObserver:self
        selector:@selector(keyboardWillShow:) name:UIKeyboardWillShowNotification object:nil];

    return self;
}

-(void)keyboardWillShow:(NSNotification*)notification{
    if (IsAtLeastiOSVersion(@"7.0")){
        [self.webView stringByEvaluatingJavaScriptFromString:@"hideFooter()"];
    }
}

I'm using PhoneGap Build to make all my executables (I'm on Windows). Is this file only available in iOS platforms, or where can I find it? If so, is there any way to implement this fix for PG Build development? — Carlos Garcia, May 09 '14 at 15:46
This file is included in Phonegap for iOS (./platforms/ios/APPNAME/Classes/MainViewController.m), from Windows you wont be able to compile for iOS (maybe using the phonegap cloud compile system, but I dont know about it). — Carlos A. Lozano, May 12 '14 at 11:01

Bug with iOS7 showing the soft keyboard with phonegap and Intel App Framework

3 Answers3