Home > Sencha Touch 2 > About Sencha Touch 2.x, PhoneGap/Cordova, and the iOS 7 Status Bar

About Sencha Touch 2.x, PhoneGap/Cordova, and the iOS 7 Status Bar

arch1Well, the zany think-tank at Apple sure does seem to enjoy making our lives as cross-device mobile app developers exciting.  And by ‘exciting,’ I mean ‘Oh God, Oh God, WE’RE BLOWING OUR DEADLINE!!!’

Their latest attempt to ‘Think Different’ resulted in changing the behavior of the iOS status bar. In prior versions of iOS, your phonegap-based app ran directly underneath it. However, in iOS 7, your phonegap-based app actually runs ON TOP OF IT as illustrated by the screenshot at right.

So… that, uh.. sucks.

To resolve this issue, I came up with the following hacks:

1) In your index.html file, add the following code to your deviceready handler:

document.addEventListener("deviceready", function() {
  if (parseFloat(window.device.version) === 7.0) {
    console.log('iOS7 is the official OS of SATAN!');
    document.body.style.marginTop = "20px";
  }
  // other phonegap related stuff
});

Next, you’ll need to modify the launch() function in your Sencha Touch app.js file to reduce the size of the viewport by 20 pixels:

Ext.application({
 // bunch of code omitted for brevity...
 name: 'ArchSTL',
 isNative: true,
 launch: function() {
  if (Ext.os.is.iOS) {
    if (Ext.os.version.major >= 7) {
       if (ArchSTL.app.isNative) // manual flag to denote "native" mode
        Ext.Viewport.setHeight(Ext.Viewport.getWindowHeight() - 20);
       }
    }
  }
  // other stuff
 }
});

Ultimately this solves the problem, and you can even set the background color of the status bar by tweaking the body background color CSS style in your index.html file. In this case, we set it to the client’s complementary app color to try and reinforce their branding standards.

Here’s the final result:

archbalt2

But hey, if it was easy, everyone would be doing it…right?

Categories: Sencha Touch 2
  1. September 25, 2013 at 1:58 am

    My favorite line of code “console.log(‘iOS7 is the official OS of SATAN!’);”

  2. Anurag
    September 25, 2013 at 4:26 pm

    Steve, thanks for sharing the nice tip. It just worked and i was able to adjust the view port hight for ios7 build.

  3. November 19, 2013 at 12:18 pm

    For me, that put’s the margin gap on the bottom of my app because the window.device.version is null. I had to do a UA lookup instead: if(navigator.userAgent.match(/iP[ha][od].*OS 7/)

  4. Toufic
    January 10, 2014 at 3:14 am

    Hi , i have applied this solution and it is working fine with me , but i am facing a problem that the status Bar Background is shifted up when the Virtual Keyboard is opened, any idea how to make the Status Bar Background fix in it’s position when the virtual is opened ?

  5. Toufic
    January 21, 2014 at 3:37 am

    any idea about how to fix the status bar when the virtual keyboard is opened ?

  6. February 16, 2014 at 1:50 pm

    Thanks, wouldn’t it be better to put the first snippet in the launch function too, somehow?

    • February 17, 2014 at 4:40 pm

      Yeah, haven’t gotten around to updating the article…

  1. September 25, 2013 at 4:59 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 544 other followers

%d bloggers like this: