ios status bar overlay issue

12 posts, 0 answers
  1. Michael
    Michael avatar
    151 posts
    Member since:
    Jan 2012

    Posted 13 Nov 2013 Link to this post

    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?
  2. Michael
    Michael avatar
    151 posts
    Member since:
    Jan 2012

    Posted 13 Nov 2013 Link to this post

    my apologies. the software must have updated.. it is ios7. I will attempt some more solutions.
  3. Michael
    Michael avatar
    151 posts
    Member since:
    Jan 2012

    Posted 13 Nov 2013 Link to this post

    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.
  4. Michael
    Michael avatar
    151 posts
    Member since:
    Jan 2012

    Posted 13 Nov 2013 Link to this post

    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.
  5. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 15 Nov 2013 Link to this post

    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!
  6. Michael
    Michael avatar
    151 posts
    Member since:
    Jan 2012

    Posted 15 Nov 2013 Link to this post

    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>
  7. Michael
    Michael avatar
    151 posts
    Member since:
    Jan 2012

    Posted 15 Nov 2013 Link to this post

    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?
  8. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 18 Nov 2013 Link to this post

    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!
  9. Michael
    Michael avatar
    151 posts
    Member since:
    Jan 2012

    Posted 18 Nov 2013 Link to this post

    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?
  10. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 19 Nov 2013 Link to this post

    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!
  11. Michael
    Michael avatar
    151 posts
    Member since:
    Jan 2012

    Posted 19 Nov 2013 Link to this post

    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.
  12. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 20 Nov 2013 Link to this post

    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!
Back to Top