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.

enter image description here

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: enter image description here

Ganapathy · Answer 1 · 2013-10-17T05:24:34.653

14

Change the Opaque property to NO and check like this :

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

its working fine for me.

edited Oct 17 '13 at 05:24

answered Oct 17 '13 at 04:06

Ganapathy

4,594
5
23
41

please see my "Update 1" above – Paul Oct 17 '13 at 05:23
change the color and check/ – Ganapathy Oct 17 '13 at 05:26
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? – Paul Oct 17 '13 at 05:34
Are you adding the web view programmatically? – Ganapathy Oct 17 '13 at 05:38
I'm not sure. The Xcode project is just an out of the box [Phonegap 3.0 build](http://docs.phonegap.com/en/3.0.0/guide_cli_index.md.html#The%20Command-line%20Interface) – Paul Oct 17 '13 at 05:46
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. – Ganapathy Oct 17 '13 at 05:53
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? – Paul Oct 17 '13 at 06:06
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? – Ganapathy Oct 17 '13 at 06:09
It would probably be fine if the WebView background was alway gray – Paul Oct 17 '13 at 06:13
1

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. – Ganapathy Oct 17 '13 at 06:20
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 Oct 17 '13 at 06:27
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 Oct 17 '13 at 06:33

score 10 · Accepted Answer · answered Oct 17 '13 at 06:40

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.

score 1 · Answer 3 · answered May 08 '14 at 03:20

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

score 1 · Answer 4 · answered Sep 18 '14 at 20:12

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.

score 0 · Answer 5 · answered Oct 17 '13 at 08:29

0

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.

answered Oct 17 '13 at 08:29

Sam T

1,033
1
9
17

1

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. – Paul Oct 17 '13 at 11:07

score 0 · Answer 6 · answered Aug 31 '14 at 01:21

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");
}

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

6 Answers6

Linked