Hiding statusbar

4 posts, 1 answers
  1. lindsoe
    lindsoe avatar
    21 posts
    Member since:
    Jul 2007

    Posted 20 Apr 2014 Link to this post

    Hi,

    1)  I create a new Kendo Mobile project in AppBuilder.
    2) Follow the info form Kendo Docs "Hidden Status Bar in iOS/Cordova" and the statusbar is correctly hidden when I deploy to my iPad (but not hidden in Appbuilder Companion app), The  problem is, that  when the statusbar is hidden it leaves a white "statusbar-sized" area in the bottom of the screen. How can I avoid this?

  2. Iva Koevska
    Admin
    Iva Koevska avatar
    286 posts

    Posted 23 Apr 2014 Link to this post

    Hi Per,

    I have tried reproducing your issue on an iOS 7 iPad 3 but to no avail.

    Would you mind creating a new Kendo UI Mobile project, keeping the index.html as it is and replacing your app.js contents with the following?

    (function (global) {
        var app = global.app = global.app || {};
     
        document.addEventListener('deviceready', function () {
            navigator.splashscreen.hide();
            StatusBar.hide();
             
            app.changeSkin = function (e) {
                var mobileSkin = "";
     
                if (e.sender.element.text() === "Flat") {
                    e.sender.element.text("Native");
                    mobileSkin = "flat";
                } else {
                    e.sender.element.text("Flat");
                    mobileSkin = "";
                }
     
                app.application.skin(mobileSkin);
            };
     
            app.application = new kendo.mobile.Application(document.body, { layout: "tabstrip-layout", statusBarStyle: "hidden" });
        }, false);
    })(window);
     

    Basically, this is the default app.js code with the modifications from the quoted article made in the correct places.

    If you are still getting a "white statusbar-sized" area, please, provide the following details:
    • What is your iPad (model, OS version)?
    • Have you changed your Status Bar Style settings in Properties -> iOS?
    • Is the StatusBar plugin enabled in Properties -> Plugins?

    Thanks!

    Regards,
    Iva Koevska
    Telerik
     

    Share what you think about AppBuilder and Telerik Platform with us in our feedback portal, so we can become even better!

     
  3. lindsoe
    lindsoe avatar
    21 posts
    Member since:
    Jul 2007

    Posted 23 Apr 2014 in reply to Iva Koevska Link to this post

    Hi,

    I have created a new Kendo Mobile project in Appbuilder. Replaced code in app.js with the code you have provided. I have not changed code in any other file. Statusbar.plugin in turned on and I have not changed the statusbar style in properties -> IOS.

    I deploy to iPad. If the app is started in portrait mode everything works fine. I started in landscape mode there is a "statusbar-sized" white area in the bottom. Turned in portrait mode part of the tabstrip is cut off.


    I am using an iPad Air with iOS 7.1.1. 

    Thanks in advance for your help.
  4. Answer
    Iva Koevska
    Admin
    Iva Koevska avatar
    286 posts

    Posted 24 Apr 2014 Link to this post

    Hello Per,

    Thanks for the details, that really helped me reproduce the issue.

    What you've encountered is a known bug in some older Kendo UI Mobile versions like the one the Kendo UI Mobile template is currently being shipped with.

    To resolve it, you can update to a newer version. You can go here, download the Kendo UI Professional pack, get the kendo.mobile.min.js and kendo.mobile.all.min.css files from the archive and use them to replace the existing framework files in your project.

    Hope this helps.

    Regards,
    Iva Koevska
    Telerik
     

    Share what you think about AppBuilder and Telerik Platform with us in our feedback portal, so we can become even better!

     
Back to Top