Hiding statusbar

[Per Lindsø]

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?

[Iva Koevska]

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

 

 

[Per Lindsø]

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.

[Iva Koevska]

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