iPhones header is showing at the application header

15 posts, 0 answers
  1. Христо
    Христо avatar
    13 posts
    Member since:
    Oct 2013

    Posted 01 Nov 2013 Link to this post

    Hello :) 

    After the new update on iOS the application header is overlaying the iPhones header (with the provider name, time and battery). How can I fix that?

    Thank you,
    Hristo Eftimov
  2. Paul
    Paul avatar
    113 posts
    Member since:
    May 2009

    Posted 01 Nov 2013 Link to this post

    Hi,
        If you using the flat theme and kendo Mobile you can do the following
    In your main script file 
    var os = kendo.support.mobileOS,
    var   statusBarStyle = os.ios && os.flatVersion >= 700 ? "black-translucent" : "black";

    Then on your deviceready function add the statusBarStyle option 
    app.application = new kendo.mobile.Application(document.body, { layout: "tabstrip-layout" , statusBarStyle: statusBarStyle});

    If the above does not apply then look at this thread as it mentions a plugin that may help
    http://www.icenium.com/signin/resources/forums/report-a-bug-/status-bar-text-colour

    Thanks
  3. Aren
    Aren avatar
    3 posts
    Member since:
    Jul 2013

    Posted 02 Nov 2013 Link to this post

    Had the same problem and found that you have to update the following files:

    kendo.mobile.all.min.css
    kendo.mobile.min.js

    Create a new kendo ui project and copy theme in your project.

    Still looking for the missing icons, they appear as all square now....
  4. Христо
    Христо avatar
    13 posts
    Member since:
    Oct 2013

    Posted 02 Nov 2013 Link to this post

    Thanks for the answers :) 

    But I'm working with jQuery Mobile and I found a option into Genereal settings and marked "Hidden" option. Into the simulator is fine but when I use Icenium Ion the problem is not fixed. Is that a problem which is showing only on Icenium Ion ( like the orientation problem ) ?

    Thansk ;) 
  5. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 04 Nov 2013 Link to this post

    Hi guys,

    This change is not Icenium, Apache Cordova, or Kendo UI Mobile/jQuery related. This comes from iOS 7 and the latest version of Xcode as explained in our release notes. As you might know, in iOS 7 the BlackTranslucent and BlackOpaque status bar styles have been deprecated, and the default status bar style has been modified.

    For those of you using Kendo UI, the fix that Paul suggested is now included in the default Kendo UI template in Icenium i.e. you do not have to do anything yourself. For all others that do not use Kendo UI in their projects, we recommend manually adjusting the status bar margin as described in this blog or use this custom Cordova plugin.

    Regards,
    Steve
    Telerik
    You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
    Looking for tips & tricks directly from the Icenium team? Check out our blog!
    Share feedback and vote for features on our Feedback Portal.
  6. Daniel
    Daniel avatar
    6 posts
    Member since:
    Jun 2013

    Posted 05 Nov 2013 Link to this post

    Hey Steve, 

    We're having the same issue and we're using Kendo UI, is not clear if we should do something else to include the fix you mention in the project, should we manually update some files? how and which files then?

    Thank you
  7. UNSW DPA
    UNSW DPA avatar
    1 posts
    Member since:
    Jun 2013

    Posted 06 Nov 2013 Link to this post

    Hi Steve,

    I tried using the custom Cordova plugin and it works fine apart from that when the device orientation is locked to landscape a permanent white overlay covers the right side of the screen. Any idea how to fix that?

    Cheers
  8. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 06 Nov 2013 Link to this post

    Hi,

    This seems like a bug in the status bar plug-in or a quirk when it is used in Cordova 3.0. To avoid that instead of using the plugin, you can manually specify the margin like so:

    document.addEventListener("deviceready", onDeviceReady, false);
     
    function onDeviceReady() {
            if (device.platform == 'iOS' && device.version >= '7.0') {
            document.body.style.marginTop = "20px";
            }
    }

    We verified this works correctly even when your device orientation is locked to landscape.

    Regards,
    Steve
    Telerik
    You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
    Looking for tips & tricks directly from the Icenium team? Check out our blog!
    Share feedback and vote for features on our Feedback Portal.
  9. Markus
    Markus avatar
    205 posts
    Member since:
    Nov 2005

    Posted 07 Nov 2013 Link to this post

    Dear Steve 

    Thanks for the workaround/fix. 

    Could this be included with some reference in the default projects when you create a new one?

    Markus
  10. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 07 Nov 2013 Link to this post

    Hello Markus,

    This is the default behavior of the status bar in iOS 7 from now on. It is only natural that people react this way to a breaking change, but in general this behavior is pushed by Apple and other people might want to have the "full screen" effect, so it would be wrong to force it by altering the default templates. We've already created a help article that covers how to change it should you need to: The Status Bar Overlays the Web View in iOS 7 Apps.

    What we might consider is introducing UI in the Icenium properties for adding the status bar plugin.

    Regards,
    Steve
    Telerik
    You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
    Looking for tips & tricks directly from the Icenium team? Check out our blog!
    Share feedback and vote for features on our Feedback Portal.
  11. Markus
    Markus avatar
    205 posts
    Member since:
    Nov 2005

    Posted 07 Nov 2013 Link to this post

    Dear Steve

    Thank's for the clearing that up for me.

    Markus
  12. Paul
    Paul avatar
    56 posts
    Member since:
    Jan 2006

    Posted 11 Nov 2013 Link to this post

    Padding may be an option, however it is not when you are dealing with tight real estate on a phone...To totally hide the iOS7 time/battery/bs, you can make an edit in the .plist file. Add the below entry and this will hide the top status bar:

    <key>UIStatusBarHidden</key><true/><key>UIViewControllerBasedStatusBarAppearance</key><false/>
  13. Trian
    Trian avatar
    1 posts
    Member since:
    Feb 2014

    Posted 12 Feb 2014 Link to this post

    Hi,

    The issue still remains. I signed up yesterday and my project is using Cordoba 3.2.0 and Kendo UI. On the iOS7 simulator the header overlaps with iOS' top bar (carrier/signal/battery/time). My temporary solution, until Telerik fixes things, is to hide that top bar altogether.
  14. Zdravko
    Admin
    Zdravko avatar
    657 posts

    Posted 14 Feb 2014 Link to this post

    Hi Trian,

    Did you try any of the solutions provided here?

    Furthermore, I will recommend updating KendoUI to its latest internal build version if you have license and if nothing helps provide us your project name so we could take a look.
    Thanks.

    Regards,
    Zdravko
    Telerik
    Icenium is now Telerik AppBuilder, and is part of the Telerik Platform. For more information on the new name, and to learn more about the Platform, register for the free online keynote and webinar on Wednesday, February 12, 2014 at 11:00 a.m. ET (8:00 a.m. PT)
  15. Kevin
    Kevin avatar
    47 posts
    Member since:
    Nov 2012

    Posted 26 Feb 2014 in reply to Aren Link to this post

    Look in your kendo/styles/images folder in your project. Make sure the files are named as so:

    kendoui.ttf
    kendoui.woff

    that should fix the "boxes"
Back to Top