iOS 7 status bar overlapping UI

Question

I recently upgraded to xcode 5 and when I run my app in the iOS simulator the splash screen overlaps the status bar and when you are in the app the status bar overlaps onto elements on my app, like a back button I have on the top left hand corner of my app. I build my app using phonegap 2.9. Any ideas how i can get this to render correctly.

Solution 1

You can resolve this issue if you are using storyboards, as in this question: iOS 7 - Status bar overlaps the view

If you're not using storyboard, then you can use this code in your AppDelegate.m in did finishlaunching:

if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
    [application setStatusBarStyle:UIStatusBarStyleLightContent];
    self.window.clipsToBounds =YES;
    self.window.frame =  CGRectMake(0,20,self.window.frame.size.width,self.window.frame.size.height-20);
}

Also see this question: Status bar and navigation bar issue in IOS7

Solution 2

In MainViewController.m inside: - (void)viewWillAppear:(BOOL)animated add this:

//Lower screen 20px on ios 7
    if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
        CGRect viewBounds = [self.webView bounds];
        viewBounds.origin.y = 18;
        viewBounds.size.height = viewBounds.size.height - 18;
        self.webView.frame = viewBounds;
    }

so the end function will look like this:

- (void)viewWillAppear:(BOOL)animated
{
    // View defaults to full size.  If you want to customize the view's size, or its subviews (e.g. webView),
    // you can do so here.
    //Lower screen 20px on ios 7
    if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
        CGRect viewBounds = [self.webView bounds];
        viewBounds.origin.y = 18;
        viewBounds.size.height = viewBounds.size.height - 18;
        self.webView.frame = viewBounds;
    }
    [super viewWillAppear:animated];
}

Solution 3

What I usually do is add two key-value properties to the Info.plist file.

The properties source code is:

Solution 4

I've got a problem opening the inApp browser with phonegap. Gimi's fix worked well, but everytime I opened the inApp browser the screen was shrinked at the bottom. So I've added an if statement to check if the webview's y origin was 0. The inApp browser hasn't the y origin 0 anymore so it solved my problem.

// ios 7 status bar fix
- (void)viewWillAppear:(BOOL)animated
{
    // View defaults to full size.  If you want to customize the view's size, or its subviews (e.g. webView),
    // you can do so here.
    //Lower screen 20px on ios 7
    if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
        if(self.webView.frame.origin.y == 0) {
            CGRect viewBounds = [self.webView bounds];
            viewBounds.origin.y = 20;
            viewBounds.size.height = viewBounds.size.height - 20;
            self.webView.frame = viewBounds;
        }
    }

    [super viewWillAppear:animated];
}

The solution is not really mine but I can't find the source. Hope it helps!

Solution 5

Place this code snippet in your MainViewController.m file in the phonegap project.

- (void)viewDidLayoutSubviews{

    if ([self respondsToSelector:@selector(topLayoutGuide)]) // iOS 7 or above
    {
        CGFloat top = self.topLayoutGuide.length;
        if(self.webView.frame.origin.y == 0){
            // We only want to do this once, or 
            // if the view has somehow been "restored" by other    code.
            self.webView.frame = CGRectMake(self.webView.frame.origin.x,
                                           self.webView.frame.origin.y + top,
                                           self.webView.frame.size.width,
                                           self.webView.frame.size.height-top);
        } 
    } 
}

View more solutions

Comments

[Automator21]

Thank you that worked. Is it supposed to just display a black bar or can the time, battery icon be displayed like it would be in iOS6?

[Sahil Mahajan]

Hey My status bar portion is not visible. Its Balck using this code. can u help me why?

[plang]

Status bar is not visible anymore with this trick, but this is really not a problem at all. Works great, thanks!

[Romance]

You can use this link also stackoverflow.com/questions/18980925/…

[asgeo1]

This is the best solution for a phonegap/cordova app. Minor nitpick - should you be using 20 rather than 18 ?

[Admin]

I tried my app with 20, and i could still see 2 pixels between the status bar and and fixed element when scrolling inside the app. You can use 20 if it works for you.

[Abadaba]

Doesn't look like it got fixed in 3.1

[Ehsan]

If you are going to copy this solution and paste in your tutorial, please do referencing! THANKS

[Fadi]

self.window.frame.size were null for me, so I had to use: CGRect screenBounds = [[UIScreen mainScreen] bounds]; screenBounds.size.width; Also, for landscape orientation the last line looked like this: self.window.frame = CGRectMake(20,0,screenBounds.size.width-20,screenBounds.size‌​.height);

[ignacio.munizaga]

This has a problem with inAppBrowser. When closing a webpage opened with inAppBrowser, you get a 18px white bar a the bottom. ¿Is there any solution to this?

[Ade]

This didn't work for me (i.e. it did not hide the status bar). However this answer that involves setting a preference in MainViewController.m does seem to work OK: stackoverflow.com/a/19571259/539883

[VicM]

Indeed, cordova 3.1 didn´t fix this. I am using cordova 3.1 and as workaround I disappeared the status bar (modifying the plist) as several offsets methods are not working for me and some other are messy from my point of view. At least for me the statusbar is not a must for my app.

[Chris Karcher]

I ran into the same problem as Ignacio where a white bar was displayed at the bottom of my app after showing another native view (e.g. the camera capture dialog) and then navigating back to the webView. The white bar would grow every time the second native dialog was shown/dismissed. The fix was to initialize 'viewBounds' to '[self.view bounds]' instead of '[self.webView bounds]'.

[Hlung]

I tried this and found that modifying window frame this way causes visual bug on some UI, e.g. UIActionSheet. Screenshot -> cl.ly/image/0Z2W2n0A2W0o

[tylerl]

I love you - 3 days of wasted tinkering to fix this issue. Other solutions had issues with device rotation and would clip my app's content. This IS the best PhoneGap solution!

[Ganesh G]

If I use this code I'm having problem with MFMailComposeViewController. The view again moving up. any idea?

[Romance]

Ganesh try to follow this url stackoverflow.com/questions/18980925/… . It will be sort out your problem ,my code will be usefull only when there will not have any other window while application is running - @G.Ganesh

[Ganesh G]

@Romance, Thank you. I solved my problem before I was asking you by the url that you shared. But I thought that you have any other solution. Anyway thank you for responding.

[James Wong]

Your hack saves the day. My client has been raising red flags all over my boss' office. Thank you sir.

[Ian Jamieson]

This is definitely the easiest answer to implement and works for me.

[Jan Dudek]

If you're having problem with scrollbars in PhoneGap after setting this, make sure you've removed height=device-height from <meta name="viewport">.

[tik27]

Problem with this, as far as cordova implantation, is that when you start the app in landscape it renders the app in portrait. Then after that you have a bar that takes up 1/4 of the screen. have not found a fix for it yet

[Red2678]

Best answer, but how can I add this via the top-level config.xml at build-time?

[Tsunamis]

@JanDudek If you were using height=device-height you can switch to width=device-width to have the same effect as before without being affected by the status bar change.

[lapo]

Isn't fixed in 3.3 yet, either. :(

[sac]

great answer. worked like charm in my phonegap application too.

[Ruben Martinez Jr.]

Still not fixed in 3.5, from the looks of it.