I just tried one of our apps in the iOs 7 simulator, and it seems to work fine except for one thing: The status bar change in iOs affects the header in the Kendo Mobile app. The elements from the iOs status bar overlays the title and the button in the header.
What's the recommended way to fix this?
I was thinking about expanding the header, so that enough pixels are reserved for the status bar without it overlaying the other elements. But that should ideally just be done when on iOs 7.
Screenshot attached.
What's the recommended way to fix this?
I was thinking about expanding the header, so that enough pixels are reserved for the status bar without it overlaying the other elements. But that should ideally just be done when on iOs 7.
Screenshot attached.
6 Answers, 1 is accepted
0
Hello Robin,
Petyo
Telerik
Given the significant design changes which are going to be introduced in iOS7, we are most probably going to provide an whole new look which targets it in our next major release (Q3).
Regards,Petyo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
John
Top achievements
Rank 1
Rank 1
answered on 20 Aug 2013, 10:29 AM
Is there a slightly more accurate ETA than Q3 available?
0
Hi Robin,
The exact date for the release is not scheduled yet, but it is expect to be in the late weeks of November.
Regards,
Kiril Nikolov
Telerik
The exact date for the release is not scheduled yet, but it is expect to be in the late weeks of November.
Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
David
Top achievements
Rank 1
Rank 1
answered on 14 Oct 2013, 05:47 PM
Hello,
Has this been fixed with the latest release? The image in that blog post appears to have the issue resolved.
I have updated from internal build and am still having issues with the status bar overlapping the header.
Thanks in advance.
Has this been fixed with the latest release? The image in that blog post appears to have the issue resolved.
I have updated from internal build and am still having issues with the status bar overlapping the header.
Thanks in advance.
0
Hi David,
Are you using PhoneGap? If yes and you want a seamless status bar in your app, you should specify the statusBarStyle Application option as "black-translucent" when initializing it. If you don't want a seamless status bar, you shouldn't specify it at all, as status bar style "black" is the default one. Please note that if you already have a meta tag for the status bar style in your application, you should remove it for the above mentioned options to work.
On a side note Kendo UI Mobile initializes all needed meta tags (viewport, icons, status bar style) in order to work properly, so any additional tags you add may interfere with its normal operation. Kendo UI Mobile provides several options for configuring its meta tags on init.
If you still have problems configuring the status bar style, I will need a sample page in order to decide what is going on and help you fix it.
Regards,
Kamen Bundev
Telerik
Are you using PhoneGap? If yes and you want a seamless status bar in your app, you should specify the statusBarStyle Application option as "black-translucent" when initializing it. If you don't want a seamless status bar, you shouldn't specify it at all, as status bar style "black" is the default one. Please note that if you already have a meta tag for the status bar style in your application, you should remove it for the above mentioned options to work.
On a side note Kendo UI Mobile initializes all needed meta tags (viewport, icons, status bar style) in order to work properly, so any additional tags you add may interfere with its normal operation. Kendo UI Mobile provides several options for configuring its meta tags on init.
If you still have problems configuring the status bar style, I will need a sample page in order to decide what is going on and help you fix it.
Regards,
Kamen Bundev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Adrian
Top achievements
Rank 1
Rank 1
answered on 19 Nov 2013, 02:16 PM
Thanks, using statusBarStyle: "black-translucent" works for me in phonegap 3.1
However, the drawer function still overlaps the status bar. My workaround is to add in an empty header to the drawer so there is an empty title which is just the right height to push the drawer down below the status bar.
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</header>
However, the drawer function still overlaps the status bar. My workaround is to add in an empty header to the drawer so there is an empty title which is just the right height to push the drawer down below the status bar.
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</header>