1

This is being used in a UIWebView inside an iOS app. It appears to work fine in regular Mobile Safari, but not in the embedded browser.

Basically, I have some HTML and CSS. The HTML element has some padding applied all around, and the BODY element does not. What I expect to see, is the contents of the BODY surrounded by empty space. In desktop Safari, this works. But for some reason, in Mobile Safari (embedded Safari), the Right padding of the HTML tag is ignored, or maybe the BODY tag is being stretched - not sure which. Please see these screenshots for clarification:

enter image description hereMobile Safari

Notice how the padding seems to disappear in the Mobile Safari example. Note: these are just images I mocked up in photoshop, not screenshots, but the behavior is the same.

Here is the code (simplified, of course):

<html>
<head>
<style>
html {
    background-color: #FFF;
    padding: 10px;
}
body {
    background-color: #0F0;
}
</style>
<body>
<div> ... some stuff ... </div>
</body>
</html>

To be sure something wasn't stretching the width of the BODY tag, I tried removing all the unneeded HTML and CSS, and basically just having an empty BODY tag with a green background, like the images show. This still has the same issue. I have also tried putting margins around the BODY tag instead of padding in the HTML tag, and this doesn't work.

Edit: I have also tried setting the box model to border-box, as discussed here, but it doesn't work.

Any ideas?

mayonaise
  • 129
  • 2
  • 12
  • Have you tried a reset stylesheet? – Wex Nov 15 '12 at 02:32
  • Make sure you haven't set width:100%; on the HTML or Body tags, I've seen this happen before and that was the culprit due to padding being applied AFTER the width:100%; due to box model properties. Your above code works just fine in Mobile Safari on iPad 3rd Gen. – Parker Young Nov 15 '12 at 06:59
  • No, I am not setting width: 100% with anything at the moment. It does appear to work fine in Mobile Safari, but using a UIWebView inside an app, it does not. – mayonaise Nov 15 '12 at 18:59
  • there is a debugging tool called iWebInspector: http://www.iwebinspector.com/ Not sure if it allows inspecting UIWebViews, though. – gregory Nov 15 '12 at 19:35

2 Answers2

3

from this answer (it worked for me)

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    NSString *padding = @"document.body.style.margin='0';document.body.style.padding = '0'";
    [webView stringByEvaluatingJavaScriptFromString:padding];
}
Community
  • 1
  • 1
Frade
  • 2,938
  • 4
  • 28
  • 39
1

It turned out the UIWebView wasn't being initialized with any dimensions. It wasn't being explicitly initialized at all, for example [[UIWebView alloc] initWithFrame:....]. Explicitly initializing it with the proper dimensions fixed the issue.

mayonaise
  • 129
  • 2
  • 12