White text in the status bar (iOS 7)

7 posts, 0 answers
  1. Valter
    Valter avatar
    4 posts
    Member since:
    Nov 2013

    Posted 14 Mar 2014 Link to this post

    Somehow i cannot manage to make the text color of the iOS status bar white. All development takes place in the AppBuilder desktop application.
    By default, the status bar text is white when I run the app in the simulator, set to iPhone 5, version 7.0. This is also the case when I test the app on my iPod Touch (running iOS 7.1) through the AppBuilder app. However, when I build an ipa-file that I transfer to my iPod through iTunes and then run it, the text color in the status bar is black.

    I am using the following code to give the status bar a dark shade of red and make the text white:
    StatusBar.backgroundColorByHexString('#bb0000');
    StatusBar.styleLightContent();

    I have made sure the StatusBar plugin is turned on, as turning it off yields an error.

    Any idea why the status bar text remains black?
  2. Iva Koevska
    Admin
    Iva Koevska avatar
    286 posts

    Posted 17 Mar 2014 Link to this post

    Hi Valter,

    We have tried to reproduce your issue on an iOS 7.1 device - deploying in the AppBuilder app, via QR code, and via iTunes both in Debug and Release mode, and we have not been able to reproduce this behavior.

    Since StatusBar.backgroundColorByHexString is supposed to work only with StatusBar.overlaysWebView(false), would you mind adding this to your code as well? Additionally, do you place the StatusBar-related code in your onDeviceReady function? If not, please, try placing it there.

    If these suggestions, do not solve your issue, would you, please, provide a copy or a jsFiddle sample of your project (you can export it from the dashboard in the Windows client and upload it to a file sharing service)? In addition, would you, please, let us know the following details.

    • The target Apache Cordova version of your project.
    • Are you using any additional frameworks, e.g. Kendo UI Mobile, jQuery Mobile, etc?
    • If you are using Kendo UI Mobile/DataViz, what is the framework version? (In your project locate the framework file, open it, and check the version number in there.) 
    • Are you using any other plugins and which ones?
    • Are you using the integrated StatusBar plugin or are have you added your own StatusBar plugin as a custom plugin?

    You mentioned that you are deploying via iTunes. From the Windows client, you can deploy directly via cable connection (Build and Deploy) or you can generate a QR code and scan it on your device. Is there any particular reason you are deploying manually via iTunes?

    Thank you for your assistance!

    Regards,
    Iva Koevska
    Telerik
     
    Icenium is now Telerik AppBuilder, and is part of the Telerik Platform. Share what you think about AppBuilder and Telerik Platform with us in our feedback portal, so we can become even better!
  3. Valter
    Valter avatar
    4 posts
    Member since:
    Nov 2013

    Posted 18 Mar 2014 in reply to Iva Koevska Link to this post

    Since StatusBar.backgroundColorByHexString is supposed to work only with StatusBar.overlaysWebView(false), would you the Windows client and upload it to a file sharing service)?

    I have now added this line. The result was no different.

    Additionally, do you place the StatusBar-related code in your onDeviceReady function?

    Yes. This is what the function looks like:
    01.document.addEventListener('deviceready', function () {
    02.    window.app = new kendo.mobile.Application(document.body, {
    03.        initial: '#home-view',
    04.        loading: '<h1>Laddar...</h1>',
    05.        platform: 'ios7'
    06.    });
    07.    StatusBar.overlaysWebView(false)
    08.    StatusBar.backgroundColorByHexString('#bb0000');
    09.    StatusBar.styleLightContent();
    10.    defaultConfiguration();
    11. 
    12.    var shake = new Shake({
    13.        frequency: 300,
    14.        waitBetweenShakes: 1000,
    15.        threshold: 16,
    16.        success: onShake,
    17.        failure: function() {}
    18.    });
    19.    shake.startWatch();
    20.}, false);

    If these suggestions, do not solve your issue, would you, please, provide a copy or a jsFiddle sample of your project (you can export it from the dashboard in the Windows client and upload it to a file sharing service)?

    Here is a JSFiddle sample: http://jsfiddle.net/Yf3d3/1/

    The target Apache Cordova version of your project.

    3.2.0

    Are you using any additional frameworks, e.g. Kendo UI Mobile, jQuery Mobile, etc

    I am using Kendo UI Mobile.

    If you are using Kendo UI Mobile/DataViz, what is the framework version? (In your project locate the framework file, open it, and check the version number in there.) 

    The framwork was automatically provided by AppBuilder, but this is what the source file says:
    * Kendo UI Complete v2013.3.1119 (http://kendoui.com)

    Are you using any other plugins and which ones?

    I am only using some of the core plugins that are automatically provided and can be activated in the Properties tab. The following plugins are activated:
    • Console
    • Device
    • Device Motion
    • Device Orientation
    • Globalization
    • Inappbrowser
    • Media
    • Network Information
    • Notification
    • Splashscreen
    • StatusBar

    You mentioned that you are deploying via iTunes. From the Windows client, you can deploy directly via cable connection (Build and Deploy) or you can generate a QR code and scan it on your device. Is there any particular reason you are deploying manually via iTunes?

    Didn't know this was possible until now. I am using Build and Deploy now on through cable. :)

  4. Iva Koevska
    Admin
    Iva Koevska avatar
    286 posts

    Posted 19 Mar 2014 Link to this post

    Hi Valter,

    Thanks for being so thorough in your reply. 

    I have used your code sample with our latest supported Kendo version and am still unable to reproduce the issue.

    It seems you are using an outdated Kendo version. The latest version that AppBuilder brings is 2013.3.1507. Do you mind trying to update the framework files as this Kendo UI version introduces a number of bug fixes and improvements.

    Here's what you need to do:
    1. Make sure to add the missing semi-colon after Statusbar.overlaysWebView(false), if you haven't yet fixed that line.
    2. Create a new Kendo UI Mobile project. 
    3. Select the kendo folder and press Ctrl+C.
    4. Return to the Dashboard and open your project.
    5. In the Project Navigator select the project node (the first one nested under the Workspace one) and press Ctrl+V.
    6. Fix any references to the Kendo framework files, if needed and make sure that your project does not contain leftovers from the older Kendo.

    Let me know if the kendo update affects the erroneous behavior. Thank you!

    Regards,
    Iva Koevska
    Telerik
     
    Icenium is now Telerik AppBuilder, and is part of the Telerik Platform. Share what you think about AppBuilder and Telerik Platform with us in our feedback portal, so we can become even better!
  5. Valter
    Valter avatar
    4 posts
    Member since:
    Nov 2013

    Posted 24 Mar 2014 in reply to Iva Koevska Link to this post

    My apologies for the late reply,

    I have added the missing semi-colon and updated to the latest version of Kendo UI Mobile offered by Appbuilder, which was 2013.3.1507. The status bar text is still black. One thing has changed, though. Whenever a new view is shown and I scroll down, an error occurs. On my iPod, the error message is as follows:
    TypeError: 'undefined' is not a function (evaluating 'i.mobile.appLevelScrolling()') from file://var/mbile/App.../Documents/kendo/js/kendo.mobile.min.js:15

    On the simulator, this is the error message:
    Uncaught TypeError: Object # <Object> has no method 'appLevelNativeScrolling' from http://local/Simulator/kendo/js/kendo.mobile.min.js:15

    This is the code I use to show the error messages:
    01.var showAlert = function(message, title, callback) {
    02.    navigator.notification.alert(message, callback || function () {}, title, 'OK');
    03.}
    04. 
    05.addEventListener('error', function (e) {
    06.    e.preventDefault();
    07.    var message = e.message + " from " + e.filename + ":" + e.lineno;
    08.    showAlert(message, 'An error occured');
    09.    return true;
    10.});

    I have also tried changing the status bar background color to black, which made no difference to the text color. (The background changed color as it was supposed to do). An interesting thing i noticed was that if I remove this line:
    StatusBar.backgroundColorByHexString('#bb0000');
    Then the background color of the status bar is whatever it was before the line was removed, as if it remembers the last background color.
  6. Iva Koevska
    Admin
    Iva Koevska avatar
    286 posts

    Posted 25 Mar 2014 Link to this post

    Hi Valter,

    Thanks for getting back on this. It seems we have introduced a regression with the *.1507 build we're currently shipping and you will need to update your Kendo UI Mobile version again. We are sorry for the inconvenience and are working on fixing this in a next release.

    You can get a newer, stable version of Kendo UI Mobile from here. From the archive, from the js folder, get the kendo.mobile.* files that are duplicate to the ones in your project and use them to replace the existing files. From the styles folder, get the css files you need.

    Again, please, accept our apologies for the inconvenience and disruption in the workflow. Looking forward to hearing from you after the update.

    Regards,
    Iva Koevska
    Telerik
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET. Seats are limited.

     
  7. Valter
    Valter avatar
    4 posts
    Member since:
    Nov 2013

    Posted 24 Apr 2014 Link to this post

    I figured an update might come useful to you or anyone experiencing the same issue.

    I submitted the app to App Store recently and it was approved today. When downloading and testing it, the status bar was white just as intended. It seems the color issue only occurred when the app was in the development stage (except for when I ran it on the AppBuilder app or in a simulator).
Back to Top