How can I change the UIWebView background color after sliding down UIWebView to fix the iOS7 status bar overlay issue?

Question

I'm writing a Phonegap 3.0+ app.

There is an issue with the status bar overlapping views in iOS7 which user Ludwig Kristoffersson provided a working answer here

Now that I have UIWebView with a 20px top margin, how can I change the UIWebView background color? I need the area behind the status bar to be the same background color as the "people" toolbar.

I have almost no experience in Objective C, and have been looking through possible SO questions to find a working solution but with no success.

UIWebView background color
UIWebView background is set to Clear Color, but it is not transparent


Below is the code that I've tried so far:

- (void)viewWillAppear:(BOOL)animated {
    //Lower screen 20px on ios 7
    if([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
        CGRect viewBounds = [self.webView bounds];
        viewBounds.origin.y = 20;
        viewBounds.size.height = viewBounds.size.height - 20;
        self.webView.frame = viewBounds;
        [self.webView setOpaque:YES];

        //neither of these seem to work when uncommented:
  //    [self.webView setBackgroundColor:[UIColor grayColor]];
  //    self.webView.backgroundColor=[UIColor grayColor];
        }
    [super viewWillAppear:animated];
    }

---

UPDATE 1

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

    self.webView.backgroundColor = [UIColor grayColor];
    self.webView.opaque=NO;
}
[super viewWillAppear:animated];
}

That still seems to give me a white background behind the status bar, rather than gray.

The result I'm hoping for is like this:

Solution 1

So I realized that the code pushes the UIWebView down 20px. Meaning that the white space by definition cannot be UIWebView. The white space is the main view which I changed the background color by doing the following:

1. Go to MainViewController.xib:



2. Select the main view:


3. Show the attributes inspector and change the color. Done.

Obvious now that I think about it, but hopefully this helps someone in future.

Solution 2

Change the Opaque property to NO and check like this :

self.webView.backgroundColor = [UIColor grayColor];
self.webView.opaque=NO;

its working fine for me.

Solution 3

This is working for Cordova 3 and Cordova 2.9

So after you set your app's background color via CSS like this:

 body{
   background-color: #000;
 }

Go to your CordovaXlib.xcode.proj and look for your "Classes" folder MainViewController.m line#142

Uncomment the "webViewDidStartLoad" method or function and just add

  self.webView.opaque=NO;

So you will have something like this:

 - (void) webViewDidStartLoad:(UIWebView*)theWebView
 {
    self.webView.opaque=NO;
    return [super webViewDidStartLoad:theWebView];
 }

Solution 4

Cordova 3.5 sets the background color in MainViewController.m's (void)webViewDidFinishLoad:(UIWebView*)theWebView:

theWebView.backgroundColor = [UIColor blackColor];

Changing or commenting out that line successfully allowed me to change the color of the iOS screen behind the webview.

Thanks to bar54 for describing this solution.

View more solutions

Comments

[Paul]

please see my "Update 1" above

[Ganapathy]

change the color and check/

[Paul]

strange... I changed to grayColor and greenColor just to test. I have tried cleaning the project several times and on my iPad, iPhone and the simulator, but can only get the background to show as white. Could it be something Phonegap is setting later somewhere?

[Ganapathy]

Are you adding the web view programmatically?

[Paul]

I'm not sure. The Xcode project is just an out of the box Phonegap 3.0 build

[Ganapathy]

Are you sure about the background color changed to gray? Because your code resembles clear color. And make sure your code will work only in IOS 7 as per your condition.

[Paul]

Sorry, my "Update 1" has a typo. I did try with the following changed: self.webView.backgroundColor = [UIColor grayColor]; self.webView.opaque=NO; and self.webView.backgroundColor = [UIColor greenColor]; self.webView.opaque=NO; My iPhone and iPad are running iOS7.0.2 and I can see the margin change which confirms I'm reaching that section of code. Anything else I could be missing?

[Ganapathy]

While loading the URL your are getting the while background still right? Or you need to change the background of web view once the content get loaded?

[Paul]

It would probably be fine if the WebView background was alway gray

[Ganapathy]

This code will set the background color of the web view while loading the URL. Once the The content get loaded in the web view, web view background will change based on the URL content.

[Paul]

but the webview has been pushed down by 20px if >=ios7. I guess the question is, where can I set the color of that 20px top margin that now exists - I thought that area was webview, but perhaps it is the containing view. Again - my Objective C experience is very minimal, so I'm not sure

[Paul]

Thank you Ganapathy, your last comment lead to me to find the answer. I needed to change the background color of the main view, not the UIWebView itself. Ugh.. silly mistake

[Paul]

Thanks Sam. That is what I was originally using. The nature of some of my views (scrollable, with textareas that are also scrollable) meant that the extra body margin would sometimes slide up. I tried setting overflow-y to hidden but still couldn't get around it. Appreciate the input though.