iOS 7 status bar with AppBuilder windows client

8 posts, 0 answers
  1. Jeelig
    Jeelig avatar
    31 posts
    Member since:
    Feb 2013

    Posted 07 Mar 2014 Link to this post

    Hi,
    I'm using AppBuilder windows client for my iOS application (with phonegap, of course) and in fact I'm not using ION, but my own Apple License to build the native app on the mobile.
    My problem today, is that I would like to have the iOS 7 status bar style, but none of the options available in the iOS properties of icenium seem to work.
    I tried them all and the app still have like a iOS6 and lower header look.
    What can I do to make it work?
    Check attachements to see what I'm talking about
  2. Jeelig
    Jeelig avatar
    31 posts
    Member since:
    Feb 2013

    Posted 10 Mar 2014 Link to this post

    Anybody? Am I the only one having this problem?
    If you know what to do, let me know ...
  3. domiSchenk
    domiSchenk avatar
    55 posts
    Member since:
    Mar 2013

    Posted 10 Mar 2014 Link to this post

    what i did for my header to be colored is:

    under Properties > Plugins > Core Plugins > Enabled Statusbar plugin

    then i set  new kendo.mobile.Application(document.body, { statusBarStyle: 'black-translucent'  });

    and with setting the header color:
    .km-on-ios .km-header .km-navbar
    {
        background-color: #10C4B2;
    }

    it worked for me.

    If there is a still a black boarder just add a margin of -20px (i think)
  4. Jeelig
    Jeelig avatar
    31 posts
    Member since:
    Feb 2013

    Posted 10 Mar 2014 Link to this post

    Thanks a lot.
    But i guess this is for Kendo Mobile ?!
    I'm not using Kendo for my apps
  5. domiSchenk
    domiSchenk avatar
    55 posts
    Member since:
    Mar 2013

    Posted 10 Mar 2014 Link to this post

    ah didn't see that you're not using kendo :-D
    you are using jquery?

    maybe this plugin: https://github.com/phonegap-build/StatusBarPlugin will help you
  6. Jeelig
    Jeelig avatar
    31 posts
    Member since:
    Feb 2013

    Posted 10 Mar 2014 Link to this post

    I tried the margin-top -20px. The header is pulled up, but still behind the black status bar
  7. Jeelig
    Jeelig avatar
    31 posts
    Member since:
    Feb 2013

    Posted 10 Mar 2014 in reply to domiSchenk Link to this post

    OK, I'll try this plugin and let you know
  8. Jeelig
    Jeelig avatar
    31 posts
    Member since:
    Feb 2013

    Posted 10 Mar 2014 Link to this post

    As StatusBar plugin is part of AppBuilder (since 3.2) all I had to do to solve the problem was to use this in the deveiceready event :
    StatusBar.overlaysWebView(false);
    +
    StatusBar.backgroundColorByHexString("#FF0000");
    or 
    StatusBar.backgroundColorByName("red");

    Hope it can be usefull to people facing the same problem in jquery.

    Ref : http://blogs.telerik.com/appbuilder/posts/13-11-07/everything-hybrid-web-apps-need-to-know-about-the-status-bar-in-ios7

    Thanks again



Back to Top