CODEWITHSUNDEEP
cordovakeyboardios7
Samuel
Samuel

Reputation: 5469

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

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,

Upvotes: 3

Views: 5671

Answers (3)

Carlos A. Lozano
Carlos A. Lozano

Reputation: 56

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()"];
    }
}

Upvotes: 0

Samuel
Samuel

Reputation: 5469

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...

Upvotes: 9

TWilly
TWilly

Reputation: 4943

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!

Upvotes: 0

Related Questions