ios status bar overlay issue

[Michael]

My application has started to overlay the top status bar on all ios devices. As a result, keyboard entry, navigation and other features no longer work properly. I found this: http://docs.icenium.com/troubleshooting/ios7-status-bar , but my issue is not ios7 specific, and adjusting the margin causes the footer to sink below the bottom edge of the screen.

I can't remember doing anything that would specifically effect the display. Perhaps someone has encountered this previously?

[Michael]

my apologies. the software must have updated.. it is ios7. I will attempt some more solutions.

[Michael]

Well, The first solution (margin adjustment) does not work because it buries the footer tab strip menu. Solution #3 (Add the StatusBar custom plugin) has an odd effect. If I include the plugin, then the app just shows a white screen. I don't even have to call or implement the files in any way. If they are present in the directory, the app will be blank.

[Michael]

I find that if I set:

<div id="foot" data-role="footer" style="bottom: 0px;">

and then at the bottom of the page:

        <script>
            if (device.platform === 'iOS' && parseFloat(device.version) >= 7.0) {
                $('#foot').css("bottom","20px");
            }
        </script>
    </body>
</html>

Then the footer corrects itself. Without the inline style set first, though, nothing will happen.

[Kamen Bundev]

Hello Michael,

I guess you're looking for this extensive blog post on the matter. Basically Kendo UI Mobile now supports a new Application option with which you can force the statusBarStyle to black-translucent in order to correct the gap above it. To change its color in PhoneGap you will need the official PhoneGap plugin for that.

Regards,
Kamen Bundev
Telerik

[Michael]

The "seamless status bars." solution doesn't seem to do anything for me. I add:

    <style>
        .km-on-ios .km-header .km-navbar {
            background-color: skyblue;
        }
        .km-on-ios .km-header .km-widget,
        .km-on-ios .km-header .km-view-title {
            color: white;
        }
    </style>

to the header, and:

<script>
        new kendo.mobile.Application($(document.body), {
            statusBarStyle: "black-translucent"
        });
</script>

at the bottom, but the status bar does not change.

Do I need to update anything else for this to work correctly?

1.     <script>

2.         new kendo.mobile.Application($(document.body), {

3.             statusBarStyle: "black-translucent"

4.         });

5.     </script>

1.     <script>

2.         new kendo.mobile.Application($(document.body), {

3.             statusBarStyle: "black-translucent"

4.         });

5.     </script>

1.     <script>

2.         new kendo.mobile.Application($(document.body), {

3.             statusBarStyle: "black-translucent"

4.         });

5.     </script>

[Michael]

Looks like I need: http://www.kendoui.com/mobile/whats-new/release-notes/q2-2013-sp1-mobile.aspx

Are there instructions anyplace on how to download the files or where to download them? Or do I just update everything? If so, how is that done?

[Sebastian]

All Kendo UI versions you are entitles to receive with your license are available in your site account's Products & Subscriptions section.

To upgrade to a newer version of Kendo UI Mobile, you need to copy the scripts and styles folders from the new Kendo UI Mobile distribution in your project and update the references to these resources, if needed. Let us know if you need more detailed instructions how this should be done.

Kind regards,
Sebastian
Telerik

[Michael]

Hmm, I am using kendo through icenium. I see kendo ui dataviz listed under products & subscriptions but not kendo ui. Is there another way to update the files for icenium?

[Kamen Bundev]

Hello Michael,

Latest release of Icenium already includes a post-Q2 SP internal build that has the needed iOS7 support. However, if your project is older, it won't get automatically updated. You can make a new Kendo UI Mobile/DataViz project and copy the files from it to your current one.

Regards,
Kamen Bundev
Telerik

[Michael]

I gave it a shot, but updating the kendo files breaks all of my icons, footers and quite a bit of other things too. I think for now I might be stuck with the margin adjustment.

[Kamen Bundev]

Hi Michael,

The icons issue is due to the non-case-sensitive file systems used in Windows and OS X - we changed the icon file names to lower case. In order to work around it in Icenium, you will need to delete the old icons and push the deletion to GitHub, and after that copy the new ones over and push them again (if you don't use GitHub, skip the pushes).

Regards,
Kamen Bundev
Telerik