Shazron's Cordova (aka PhoneGap) Blog

at Adobe Systems Inc.

Cordova iOS and iOS 7 Support

with 77 comments

PluginWith the release of Cordova 3.1.0, we added preliminary iOS 7 support, particularly the support of four new UIWebView properties: GapBetweenPages, PageLength, PaginationBreakingMode, and PaginationMode. There is more iOS 7 support added today in the core plugins listed below.

The config.xml parameters HideKeyboardFormAccessoryBar and KeyboardShrinksView also support the new iOS 7 keyboard. However, going forward these two properties have been removed in 3.2.0, and you will need to grab the new keyboard plugin (install using the plugin id org.apache.cordova.keyboard). The decision to remove this functionality into a plugin is so updates and fixes are not tied to a particular core release.

Also, the UIWebView properties stated above (as well as others related) will eventually be put into a plugin and not included in the core, the target for this is the 3.2.0 release.

These core plugins have been updated to support iOS 7:

There is also a new statusbar plugin (install using the plugin id org.apache.cordova.statusbar). This gives you an API to change the status bar to be like it was in iOS 6 (where the status bar does not overlay the webview). The plugin also gives you the ability to control the status bar appearance and visibility.

[UPDATE] The keyboard and statusbar plugin repos have been moved from the plugins branch of the cordova-labs repo to its own repo, cordova-plugins

Written by shazron

October 15, 2013 at 10:33 pm

Posted in cordova, phonegap

77 Responses

Subscribe to comments with RSS.

  1. Great news! I already have the statusbar plugin in place, looks great.
    Fast question on “org.apache.cordova.inappbrowser” – how do we update to the version with the fix in the dev branch?
    I took a guess and tried to re-add it with the branch:
    phonegap local plugin add;h=refs/heads/dev
    but that threw errors.

    Benjamin Hill

    October 15, 2013 at 11:02 pm

  2. Shazron how do we know what is a plugin available through the CLI? Are they listed somewhere?


    October 15, 2013 at 11:40 pm

  3. And how to add?
    cordova plugin add
    does not work


    October 16, 2013 at 11:30 am

  4. Can anyone provide a working implementation guideline for the statusbar login?
    I can’t get this working…


    October 16, 2013 at 12:00 pm

    • what do you mean “statusbar login”? The docs are linked in the blog post.


      October 17, 2013 at 4:13 am

  5. hey Shaz, thxx for the status bar plugin. Havent tried it yet, but it beats the hack everyone is doing thru main VC or CSS margin top. Glad to see Cordova taking care of it.

    walid taraf

    October 16, 2013 at 3:51 pm

  6. Hi Shazron,

    I just tried Cordova 3.1 yesterday and experienced several keyboard issues which didn’t happened with PhoneGap 3.0, could you have a look at below link and let us know if Keyboard plugin doesn’t has them? Keyboard plugin is only available for Cordova 3.2, correct?


    Tien Do

    October 17, 2013 at 5:08 am

  7. Hi! The id in phonegap3.0 included the word ‘core’. For example, inappbrowser plugin was: org.apache.cordova.core.inappbrowser and now is: org.apache.cordova.inappbrowser. How can I update if the ids are not the same?


    October 17, 2013 at 12:21 pm

    • Remove the plugin using the old app id. Then add using the new app id.


      October 17, 2013 at 1:34 pm

  8. Has anyone seen an issue with the new statusBar plugin whereas the app gets stretched out, and i can’t see the right side of my app when i turn on ‘StatusBarOverlaysWebView’ to false? If i leave the default (true), all is well. Just that one property change in config.xml totally revamps the app width. So I cant use the plugin and i have to go back to customizing my main VController manually to handle the web view and push down the view biounds height by about 20 pixels.

    walid taraf

    October 17, 2013 at 2:15 pm

    • Can you test in a new project? Would be great if you can file an issue with a sample index.html demonstrating the issue (use component cordova-labs).


      October 17, 2013 at 6:59 pm

      • Shazron, i will in the next few days. Not forgotten, and will file an issue if i do see it.

        walid taraf

        October 18, 2013 at 5:06 pm

      • Thank you!


        October 18, 2013 at 6:10 pm

    • I’m experiencing the same thing with my app…


      October 17, 2013 at 8:47 pm

      • Hey Geoff, have you noticed also a huge app size increase with 3.1? Mine has tripled from 3B to 10MB…i did install all the core plugins and one simple custom plugin. But all these plugins were part of pre-3.0 Cordova code prior to CLI/Plugman.

        I know we have a platforms/xxx directory and i only have installed/built iOS. We do have redundant ‘www’ folders but i cant imagine those being the cause

        walid taraf

        October 18, 2013 at 5:05 pm

      • The only thing that gets packaged would be the platforms/ios/www folder. Check that to see if there are things that shouldn’t be there?


        October 18, 2013 at 6:11 pm

      • I know what you mean Shazron, but i just created a vanilla project as follows, and i have an 8mb IPA thru Xcode5. Zero plugins, zero of our own code. Something’s not right…THAT is all i did below, then click on the test.xcodeproj to bring up xcode and archive an IPA that is 8MB.

        Can you try it and see what you get? Such simple vanilla steps. THANK YOU!

        1. cordova create Test com.att.myTest Test
        2. cordova platform add ios
        3. cordova build
        4. cordova build iOS

        That is a huge issue and we may have to wait out on implementing 3.1.

        walid taraf

        October 18, 2013 at 6:17 pm

      • Yup – like I mentioned, check out your platforms/ios/www folder and remove what you don’t need there from the default template. The “res” subfolder has about 8 MB of icons and stuff. In a non-CLI project create — it only added a copy of the generic template minus the non-iOS sample assets, but the CLI of course adds in the the generic template unmodified.


        October 18, 2013 at 6:30 pm

    • I am having this same issue.


      October 25, 2013 at 7:44 am

  9. Shazron star moderator! THANK YOU for prompt reply. Had checked the ‘stackedoverflow’ forums as well with no answer.

    Phonegap docs do not mention that clearly. Am sure this is going to help others coming behind me with 3.1 implementation.

    Vanilla project now sitting at 983KB. World of difference.
    Thanks – merci – gracias – choukran.

    walid taraf

    October 18, 2013 at 6:48 pm

    • No worries! I’ll add an issue to the issue tracker for this.


      October 18, 2013 at 6:49 pm

  10. If I have StatusBarOverlaysWebView to false it stretches my app height. I have a navbar with fixed positioning to bottom:0 and the navbar gets pushed off the screen when I have StatusBarOverlaysWebView set to false, but if I have it set to true the height of the app is fine and my navbar displays correctly.


    October 19, 2013 at 6:33 pm

    • Yeah this is a known issue. The webview is already the correct dimensions (filling in the rest of the area that is not the statusbar) – the meta tag viewport attribute value “height=device-height” is causing this. The only remedy is to remove that value.


      October 19, 2013 at 7:38 pm

      • My viewport meta tag doesn’t have the height value in it at all, but I tried removing the meta tag all together and still get the same problem. Will there be an update addressing this soon?


        October 21, 2013 at 4:40 pm

      • I am seeing this behavior as well with no viewport meta tag at all. I resolved it (temporarily) by changing the else condition in CDVStatusBar.m’s setStatusBarOverlaysWebview method to re-initialize bounds to the webView’s bounds before manipulating it:

        // re-initialize bounds to the webView’s bounds
        bounds = self.webView.bounds;

        CGRect statusBarFrame = [UIApplication sharedApplication].statusBarFrame;
        bounds.origin.y = statusBarFrame.size.height;
        bounds.size.height -= statusBarFrame.size.height;

        self.webView.frame = bounds;
        [self.webView.superview addSubview:_statusBarBackgroundView];

        I don’t know if that’s “the issue” but it fixes it. It might be cleaner so extend the plugin with your own, otherwise when you update the plugin on it’s next release your change will get overridden. However if the issue is fixed then, it doesn’t matter if the change is overridden.


        October 30, 2013 at 8:24 pm

      • Thanks, I’ll take a look at this for the next update.


        November 4, 2013 at 7:54 pm

      • This is quite a problem as the KeyboardToolbarRemover Plugin requires this meta tag value. h

        David Pfahler

        October 31, 2013 at 11:12 am

  11. Hi Shazron,

    I’m trying to hide the statusbar once the inappbrowser loads a page but it’s not working even when the StatusBar.isVisible returns true.

    Also, when I catch the exit event, instead of showing the statusbar is hiding it.

    This is the code I’m working on it, it’s kinda weird.

    ref.addEventListener(‘loadstart’, function(event) {
    ref.addEventListener(‘exit’, function(event) {

    Thanks in advance for your time!

    Baldemar Roldan

    October 23, 2013 at 7:34 pm

    • I agree with Fernando, scrolling in InAppBrowser still causes the statusbar to be overlayed. Shazron, please fix this!

      Steve Tsokev

      December 13, 2013 at 3:31 pm

    • I wouldn’t recommend using the statusbar plugin with the InAppBrowser – the InAppBrowser plugin (the dev branch I linked to) handles the statusbar automatically.


      October 23, 2013 at 9:00 pm

      • I have noticed that too, but with ios7 the statusbar overlays the content of the inappbrowser, that’s why I was looking to hide and show the statusbar.

        Is there any plans to give the inappbrowser plugin some customization options like position (up, down) and the toolbar background color?

        Once again, thanks for your time and support!

        Baldemar (@baldemarch)

        October 23, 2013 at 9:24 pm

      • No it doesn’t overlay the content – that’s precisely what I’m saying, the dev branch version *fixes* this for InAppBrowser.


        October 23, 2013 at 9:32 pm

      • I installed the dev version of InAppBrowser plugin and the problem is fixed partially because when you make scroll in the web loaded the status bar overlays the content.

        I installed with this: phonegap local plugin add


        October 23, 2013 at 10:07 pm

  12. Hi everyone! Do you know where is the documentation or the repo of org.apache.cordova.keyboard in github? Thanks!


    October 29, 2013 at 12:49 pm

  13. How do you install the plugin. Thanks


    October 31, 2013 at 1:15 pm

    • Are you using the Cordova CLI? See the docs for the CLI at
      Generally it is “cordova plugin add [plugin id]”. If not, download using npm/nodejs and look at the help.


      November 4, 2013 at 7:53 pm

      • created through a Cordova platform’s bin/create script instead of through the cordova tool. So I can install then?


        November 6, 2013 at 1:41 pm

      • Try using: phonegap local plugin add [plugin id]


        November 6, 2013 at 1:29 pm

      • I used the cordova download and installed it using Terminal and created the project folder. I followed the instruction to do the way
        but have issue when I create command it says command not found.


        November 6, 2013 at 1:18 pm

  14. How do you install the status bar plugin in Cordava,


    November 4, 2013 at 1:47 pm

  15. I’m having an issue with the keyboard plugin with the following setting.
    I submitted a ticket here:
    Could you possibly take a look? This is preventing me from upgrading to 3.2


    twilly86m Wilson

    November 14, 2013 at 11:35 pm

  16. i have built an app using phonegap. This app functions well in Android, and also in iOS, but only up to iOS 7. I don’t know why, but when i try to upload an image via Phonegap FileTransfer method, the image is not uploaded.

    Have you already faced this issue? How can I fix it? I think that probably it’s a phonegap bug, that has not yet been detected.

    Can You help me please?

    Thank you in advance!


    November 20, 2013 at 12:14 pm

  17. I installed the statusbarplugin and in config.xml file i saw the following code

    and changed ” ” by doing so my footer disappears and I upgraded to cordova 3.2


    November 21, 2013 at 3:53 pm

    • I installed the statusbarplugin and in config.xml file i saw the following code

      and changed ” ” to true


      November 21, 2013 at 3:54 pm

  18. ok I am try to type this again after installing the plug in I saw config file the StatusBarOverlaysWebView to be true and changed it false so the footer disappear from the app. Please let me what I did wrong.


    November 21, 2013 at 3:57 pm

    • I had that issue as well and there seems to be a bug setting the height larger than the screen with the Status Bar set to false in the config.xml. I got around this by calling ‘StatusBar.overlaysWebView(false);’ in my ‘onDeviceReady()’ and leaving StatusBarOverlaysWebView ‘true’ in the config.


      November 21, 2013 at 4:03 pm

      • Yea I created a .js file and called the ‘StatusBar.overlaysWebView(false); and still doesn’t seems work
        document.addEventListener(‘deviceready’, function() {
        }, false);


        November 21, 2013 at 4:45 pm

      • If I’m understanding the issue, see comment above from me: Jamal October 30, 2013


        November 21, 2013 at 4:49 pm

  19. Jamal there is no reply from you on october 31 above?


    November 21, 2013 at 7:12 pm

  20. I see you reply, let me see if that works


    November 21, 2013 at 7:13 pm

  21. Jamal thank you worked beautifully. I have an issue with the fixed Header is not Fixed (can go downward)in IOS Jquery mobile and phonegap. Have any idea. I used doesn’t seem to help.



    November 22, 2013 at 3:11 pm

  22. Thanks for this plugin! One issue — when the app first launches, probably before the plugin is loaded, the status bar is briefly hidden. During that second or two, since I have a splash screen, I can see the portion of the image that’s normally covered. This is happening even though UIStatusBarHidden is set to false. Any idea how to prevent it?

    Also, it might be nice if a future version of this plugin generated a JavaScript event when you tapped on the center of the status bar. That way our apps could could respond to it by scrolling to the top.


    November 25, 2013 at 3:31 pm

    • Not sure – haven’t noticed that yet. Do you notice it without the plugin installed? (on a plain vanilla new project).
      That’s a good idea – do you mind filing an issue at Thanks!


      November 25, 2013 at 8:05 pm

  23. I have an issue with the fixed Header is not Fixed (can go downward)in IOS Jquery mobile and phonegap. Have any idea. I used doesn’t seem to help.



    November 26, 2013 at 2:02 pm

  24. Hi there !!

    I’m a new cordova user (since v2.7.0) and have a question about ios7 theme compatibilty.
    How to use/make it in place ? any package to install ?

    I Have to create a window based ios app with links and other stuffs



    December 1, 2013 at 2:55 am

  25. have an issue with the fixed Header is not Fixed (can go downward)in IOS Jquery mobile and phonegap. Have any idea. I used doesn’t seem to help.



    December 2, 2013 at 2:00 pm

  26. Just tried Keyboard plugin with Cordova 3.2.0 on an iOS app, every time I tap on an input field then keyboard shows up and push view up with a same height of accessory bar. When tapping outside to hide keyboard then view is moved down, there was a flicker too. Things worked well with Cordova 3.1 (no keyboard plugin), but broken now :(

    I used below keyboard settings (equivalent keys in config.xml were removed):


    Tien Do

    December 11, 2013 at 5:35 pm

  27. hi,

    all the methods of status bar plugin are working except StatusBarOverlaysWebView & StatusBarBackgroundColor in inappbrowser.

    I do not want the overlay but just cant get it right. Wondering other methods of status bar is working but not the above mentioned 2 methods.

    Any particular thing that i am missing here?

    i am able to use these methods in native pages on the app but as soon i as open the inappbrowser these 2 methods do not work.

    Shazron, pl help me on this


    July 20, 2014 at 5:28 pm

  28. Works perfectly, thanks a lot


    December 26, 2014 at 7:24 pm

  29. Sorry to bring up an old thread. PaginationMode seems promising.. but how to use it at all with cordova? There’s no actual usage example anywhere on the web.


    May 13, 2015 at 11:27 am

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Get every new post delivered to your Inbox.

Join 1,757 other followers

%d bloggers like this: