How can I change the UIWebView background color af

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:

Answer 1

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.

Answer 2

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];
 }

Answer 3

Alternatively, set a 20px margin on the body of the HTML inside your UIWebView, and then the background colour set in your CSS will go all the way to the top.

function onDeviceReady() {
    if (parseFloat(window.device.version) === 7.0) {
          document.body.style.marginTop = "20px";
    }
}

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

Note that your app will need the device plugin added for this to work.

Answer 4

Add the following CSS definitions:

#ios7statusbar {
  width:100%;
  height:20px;
  background-color:white;
  position:fixed;
  z-index:10000;
}
.ios7 .ui-page, .ios7 .ui-header, .ios7 .ui-pane {
  margin-top: 20px;
}

Add a JavaScript based user agent detection to your app initialization:

if (navigator.userAgent.match(/(iPad.*|iPhone.*|iPod.*);.*CPU.*OS 7_\d/i)) {
  $("body").addClass("ios7");
}

Answer 5

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.

Answer 6

Change the Opaque property to NO and check like this :

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

its working fine for me.