This is a migrated thread and some comments may be shown as answers.

ios status bar overlay issue

11 Answers 150 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 13 Nov 2013, 04:10 PM
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?

11 Answers, 1 is accepted

Sort by
0
Michael
Top achievements
Rank 1
answered on 13 Nov 2013, 04:13 PM
my apologies. the software must have updated.. it is ios7. I will attempt some more solutions.
0
Michael
Top achievements
Rank 1
answered on 13 Nov 2013, 06:43 PM
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.
0
Michael
Top achievements
Rank 1
answered on 13 Nov 2013, 10:24 PM
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.
0
Kamen Bundev
Telerik team
answered on 15 Nov 2013, 12:15 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Michael
Top achievements
Rank 1
answered on 15 Nov 2013, 03:08 PM
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>
0
Michael
Top achievements
Rank 1
answered on 15 Nov 2013, 03:26 PM
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?
0
Sebastian
Telerik team
answered on 18 Nov 2013, 09:34 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Michael
Top achievements
Rank 1
answered on 18 Nov 2013, 10:07 PM
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?
0
Kamen Bundev
Telerik team
answered on 19 Nov 2013, 08:10 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Michael
Top achievements
Rank 1
answered on 19 Nov 2013, 04:08 PM
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.
0
Kamen Bundev
Telerik team
answered on 20 Nov 2013, 08:14 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
General Discussions
Asked by
Michael
Top achievements
Rank 1
Answers by
Michael
Top achievements
Rank 1
Kamen Bundev
Telerik team
Sebastian
Telerik team
Share this question
or