iPhones header is showing at the application header

[Христо]

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

[Paul]

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

[Aren]

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

[Христо]

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 ;) 

[Steve]

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.

[Daniel]

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

[UNSW DPA]

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

[Steve]

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.

[Markus]

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

[Steve]

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.

[Markus]

Dear Steve

Thank's for the clearing that up for me.

Markus

[Paul]

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

[Trian]

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.

[Zdravko]

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

[Kevin]

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"