The Status Bar Overlays the Web View in iOS 7 Apps

This troubleshooting tutorial is intended for mobile developers who want to modify the default overlapping behavior of the status bar in iOS 7 applications. You will learn:

  • How to set a fixed top margin to your web views.
  • How to apply a style fix to your Kendo UI Core or Kendo UI Professional applications.
  • How to import and use the StatusBar custom plugin.

Problem

After updating to AppBuilder 1.9 and building your existing apps for iOS, on iOS 7 devices the status bar overlays the web view and the BlackTranslucent and BlackOpaque status bar styles are no longer applied.

Cause

Starting with AppBuilder 1.9, AppBuilder uses the latest Xcode to build your apps for iOS. In iOS 7, the default status bar style overlays the web view in hybrid apps and the BlackTranslucent and BlackOpaque status bar styles are deprecated. This affects the design of all existing apps and newly created apps with the Blank (JavaScript), Friends and jQuery Mobile templates.

In newly created apps with the Kendo UI mobile app and Kendo UI mobile app with data visualization templates the Kendo UI style fix has already been applied in the template and the status bar does not overlay the web view.

For more information about changes in the status bar in iOS 7, see UIStatusBarStyle and The Status Bar in iOS 7.

Solution

You can modify the default iOS 7 status bar behavior with any of the following approaches.

Solution Option #1: Add a top margin to the web view

This approach works around the default overlay behavior but does not provide any control over the status bar style.

You can work around the overlaying status bar by adding a top margin to your web view in the Apache Cordova deviceready event.

For apps that do not use jQuery Mobile, make sure to add the following code to your application script file.

function onDeviceReady() {
    if (device.platform === 'iOS' && parseFloat(device.version) >= 7.0) {
        document.body.style.marginTop = "20px";
    }
}

document.addEventListener('deviceready', onDeviceReady, false);

For apps that use jQuery Mobile, make sure to add the following code to your application script file.


function onDeviceReady() {
    if (device.platform === 'iOS' && parseFloat(device.version) >= 7.0) {
        $('.ui-header > *').css('margin-top', function (index, curValue) {
            return parseInt(curValue, 10) + 20 + 'px';
        });
    }
}

document.addEventListener('deviceready', onDeviceReady, false);

You can run your app in the simulator and in the Cordova developer app for iOS to test this solution.

Solution Option #2: Apply the Kendo UI status bar fix

This approach works around the default overlay behavior and provides some control over the status bar style.

If your app is based on the Kendo UI Core or Kendo UI Professional frameworks, you can apply the Kendo UI fix to your mobile app declaration. For the fix to take effect, you need to update your Kendo UI Core or Kendo UI Professional files first. For more information how to update your framework files, see Update the Frameworks in Your App.

After updating your Kendo UI Core or Kendo UI Professional files, make sure to initialize your Kendo application with the following code.

var os = kendo.support.mobileOS,  
            statusBarStyle = os.ios && os.flatVersion >= 700 ? "black-translucent" : "black";  
var app = new kendo.mobile.Application(document.body, { statusBarStyle: statusBarStyle });

You can run your app in the simulator and in the Cordova developer app for iOS to test this solution.

Solution Option #3: Add the StatusBar custom plugin

This approach provides control over the overlay behavior and the status bar style.

With the StatusBar custom plugin, you can control both the overlay behavior and the status bar style.

If your app targets Apache Cordova 3.2.0 or later, you can enable the StatusBar plugin as a core plugin from AppBuilder. You do not need to make any calls to the plugin from your code.

  • If you are running classic Windows desktop client or the in-browser client, perform these steps.

    1. In the Project Navigator, double-click Properties.
    2. In the sidebar in the Properties dialog, select Plugins.
    3. Navigate to the Core Plugins section and expand it, if needed.
    4. Verify that the StatusBar plugin is enabled.

      in-browser client: The check box for the StatusBar plugin must be selected.

      classic Windows desktop client: The StatusBar must be set to ON.

  • If you are running extension for Visual Studio, perform these steps.
    1. In the Solution Explorer, double-click Properties.
    2. In the sidebar in the Properties dialog, select Plugins.
    3. Navigate to the Core Plugins section and expand it, if needed.
    4. Verify that the StatusBar plugins is set to ON.

If your app targets Apache Cordova 3.0.0, you need to manually add the StatusBar plugin as a custom plugin.

The StatusBar custom plugin is already Plugman-compatible and compatible with Apache Cordova 3.0.0.

  1. Download the plugin files from this repository.
  2. Add the plugin files to the Plugins folder in AppBuilder.
    If you downloaded the plugin files as an archive, import the archive in AppBuilder.
    If you did not download the plugin files as an archive, import the files and folders from your local file system in AppBuilder.
  3. In your deviceready event handler, call the custom plugin.
    For example, to turn off the web view overlay, use the following code.

    document.addEventListener('deviceready', function () {
            navigator.splashscreen.hide(); //Hides the splash screen for your app.
            StatusBar.overlaysWebView(false); //Turns off web view overlay.
    }, false);
    
  4. If the archive was created on a macOS system, make sure to delete any system macOS files and folders such as __MACOSX and .DS_Store.

You cannot run your app in the simulator and in the Cordova developer app for iOS to test this solution. You need to build and run your app on device.

See Also

Start a free trial Request a demo
Contact us: +1-888-365-2779
sales@telerik.com
Copyright © 2016-2017, Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.