31

Im loading local html files, since iOS7 there is added white space on top in the UIWebView.(I cant post an image as i do not have enough points.) image can be seen here- snap shot from iPhone simulator, uiwebview surrounded by black frame, the html content is grey, but there is white added above it

I have tried to adjust the zoom using

[webView stringByEvaluatingJavaScriptFromString:@"document. body.style.zoom = 5.0;"];
webView.scalesPageToFit = NO;

I also set tried to remove white spacing:

 NSString *padding = @"document.body.style.margin='0';document.body.style.padding = '0'";
[webView stringByEvaluatingJavaScriptFromString:padding];

still no luck. In the desktop chrome browser there is no whitespace. The html files are Google Swiffy files - containing html and JSON.

edit: updated Image

Community
  • 1
  • 1
DevC
  • 6,982
  • 9
  • 45
  • 80
  • Sorry, somehow I don't see space there. Could you upload a simple screenshot? – ott-- Sep 22 '13 at 19:48
  • @ott-- sorry i dont have enuf rep points! THe html has a grey background, the html is hosted within a frame, the white above the grey is the space, it is a snap shot from the iPhone simulator – DevC Sep 22 '13 at 19:58
  • But you could send the full screenshot to imageshack too, like the other image (even from the simulator with the borders). – ott-- Sep 22 '13 at 21:06
  • @ott-- updated image is above – DevC Sep 22 '13 at 21:56
  • Did you ever figure this out? I have the same problem. iOS6 was fine, but iOS7 adds a bunch of white space above it. I tested by setting margin, padding to zero, background color to red, and then background color of uiwebview to blue. There is about 60px of blue color. It looks like the height of it is the same as the nav bar, I wonder if this is the new feature of having the translucent nav bar with the uiwebview underneath it. – Kris Sep 30 '13 at 15:04
  • @Kris the solution below helped. You could try turning off auto-layout but this leads to all other problems. Try pinning the webview in place using autolayout, this may help – DevC Nov 13 '13 at 11:48

6 Answers6

142

Try self.automaticallyAdjustsScrollViewInsets = NO; in ViewDidLoad.

ios 7 add 64px automatically for scroll view. (status bar and nav bar)

Yiding
  • 2,914
  • 3
  • 21
  • 16
  • 2
    For details on this see https://developer.apple.com/library/ios/documentation/userexperience/conceptual/TransitionGuide/AppearanceCustomization.html – RajV Oct 15 '13 at 12:27
  • 1
    iOS 7 only, so it has to be checked before using it, like if ([self respondsToSelector:@selector(setAutomaticallyAdjustsScrollViewInsets:)]) – Jingwei Sep 18 '14 at 03:02
  • 1
    I wonder what is the logic of adding that bar in the first place. – Duck Sep 26 '14 at 03:28
  • 2
    works great - but with Swift it needs to be the boolean false value: self.automaticallyAdjustsScrollViewInsets = false – bkurzius Jan 23 '16 at 18:46
5

This problem only affects the UIWebView if it is the first subview of the parent view. One alternative way to work around this problem is to add another non-visible empty view to the parent view as the first view. In Interface Builder add a zero size subview and use the Editor->Arrange->Send to Back menu command.

If you're not using Interface Builder, but instead are subclassing the UIWebView, then it can be done by creating a UIView instance variable called scrollFixView and overriding the following methods:

- (void)didMoveToSuperview
{
  [super didMoveToSuperview];

  if ([self superview].subviews.firstObject == self) {
    _scrollFixView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 0, 0)];
    _scrollFixView.hidden = YES;
    [[self superview] insertSubview:_scrollFixView belowSubview:self];
  }
}

- (void)removeFromSuperview
{
  if (_scrollFixView) {
    [_scrollFixView removeFromSuperview];
    _scrollFixView = nil;
  }

  [super removeFromSuperview];
}
ThomasW
  • 16,981
  • 4
  • 79
  • 106
3

I had the same problem so I tried a few things:-)

This worked for me, but correct me please if there is a better way.

-(void)webViewDidFinishLoad:(UIWebView *)webView
 {
   if(self.navigationController.navigationBar.translucent == YES)
   {

    _webView.scrollView.contentOffset = CGPointMake(_webView.frame.origin.x, _webView.frame.origin.y - 54);

   }
 }

So basically you need to :

1) Add the UIWebView delegate method - webViewDidFinishLoad: 2) Then I setup an if statement to check if the translucent option is active.

The last one you only need to do of course if you give the user the option within your app. The number after the _webView.frame.origin.y is just for my app. It may differ for you.

jwknz
  • 6,598
  • 16
  • 72
  • 115
  • 1
    Thanks, ive tried your solution and it worked also, however @Yiding's is quicker and to the point -- you should try it yourself :) – DevC Oct 03 '13 at 13:42
  • Yiding's solution is appropriate if your code controls the `UIViewController`, but in cases where you don't, like with a library, then this is an alternative. – ThomasW Apr 14 '14 at 06:27
  • What exactly is "54"? –  May 19 '20 at 01:52
1

I solved this problem by simply setting a constraint on the WebView, setting the top space between it and the View top to 0, causing the NavBar to overlap the whitespace.

Iyashu5040
  • 49
  • 1
  • 7
0

One alternative to Jeff Kranenburg's method is to subclass and override the UIWebView subclasses' UIScrollViewDelegate method scrollViewDidScroll:. This is only appropriate if scrolling is turned off for your subclass.

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
  if ([[self superclass] instancesRespondToSelector:_cmd]) {
    [super scrollViewDidScroll:scrollView];
  }

  [self fixUpScrollViewContentOffset];
}

- (void)fixUpScrollViewContentOffset
{
  if (!CGPointEqualToPoint(self.scrollView.contentOffset, CGPointZero)) {
    self.scrollView.contentOffset = CGPointZero;
  }
}
ThomasW
  • 16,981
  • 4
  • 79
  • 106
0

I already got it .

here my logic code, When the application open the website you must get the size of your webview then set it on height

here my code

     ViewGroup.MarginLayoutParams p = (ViewGroup.MarginLayoutParams) webpage.getLayoutParams();
            p.height = webpage.getHeight();
// check if how long you need to set your height for webpage then set it :)
            Log.e(" webpage.getHeight()", String.valueOf(webpage.getHeight()));
            webpage.setLayoutParams(p);

Hope you will take my code and my answer to :) works on any devices even tabs too :)

Jude Bautista
  • 160
  • 1
  • 16