8

I am loading a PDF into a UIWebview and I changed the background color to clear and set opaque to false. However now there is a padding or margin in my UIWebView that I would like to remove so the UIWebview is the screen.

I created a UIWebview like so:

let webview = UIWebView()
webview.frame = self.view.bounds
webview.scrollView.frame = webview.frame
webview.userInteractionEnabled = true
webview.scalesPageToFit = true
webview.becomeFirstResponder()
webview.delegate = self
webview.scrollView.delegate = self
webview.opaque = false
webview.backgroundColor = UIColor.clearColor()
self.view.addSubview(webview)
webview.loadRequest(NSURLRequest(URL:url))
webview.gestureRecognizers = [pinchRecognizer, panRecognizer]

and I applied this to the webViewDidFinishLoad method

func webViewDidFinishLoad(webView: UIWebView) {
        let padding = "document.body.style.margin='0';document.body.style.padding = '0'"
        webView.stringByEvaluatingJavaScriptFromString(padding)
}

but there is still a padding or margin, it looks like this:

enter image description here

How do I fix this?

The Reason why I need this fixed is because I am going to be saving this UIWebView as a PDF and when I save it, that extra spacing is there also, here is my PDF generate code:

func drawPDFUsingPrintPageRenderer(printPageRenderer: UIPrintPageRenderer) -> NSData! {

        let data = NSMutableData()


        UIGraphicsBeginPDFContextToData(data, CGRectZero, nil)


        UIGraphicsBeginPDFPage()


        printPageRenderer.drawPageAtIndex(0, inRect: UIGraphicsGetPDFContextBounds())


        UIGraphicsEndPDFContext()


        return data
    }

and more

let screenHeight = appDelegate.webview!.scrollView.bounds.size.height

        let heightStr = appDelegate.webview!.scrollView.bounds.size.height

        let height = heightStr

        let pages = ceil(height / screenHeight)

        let pdfMutableData = NSMutableData()

        UIGraphicsBeginPDFContextToData(pdfMutableData, appDelegate.webview!.scrollView.bounds, nil)

        for i in 0..<Int(pages)
        {

            if (CGFloat((i+1)) * screenHeight  > CGFloat(height)) {
                var f = appDelegate.webview!.scrollView.frame
                f.size.height -= ((CGFloat((i+1)) * screenHeight) - CGFloat(height));
                appDelegate.webview!.scrollView.frame = f
            }

            UIGraphicsBeginPDFPage()

            let currentContext = UIGraphicsGetCurrentContext()

            appDelegate.webview!.scrollView.setContentOffset(CGPointMake(0, screenHeight * CGFloat(i)), animated: false)

            appDelegate.webview!.scrollView.layer.renderInContext(currentContext!)

        }

        UIGraphicsEndPDFContext()
user979331
  • 11,039
  • 73
  • 223
  • 418
  • is it possible that the pdf content itself is formatted with an inset? Anyway, don't mess with the scroll view frame. That's doing nothing because the web view is probably at the origin of it's parent, and it would be harmful otherwise. I'd guess also that YES is already the default value for scalesPageToFit. Best constructive idea I can offer is webView.scrollView.contentInset. – danh Aug 06 '16 at 18:57
  • Can you put this on answer please – user979331 Aug 06 '16 at 20:17

6 Answers6

5

Setting the scroll view frame to the web view frame will have no effect while the web view is at the origin and an unwanted effect otherwise.

Adjust the scroll view contentInset:

// set t,l,b,r to be negative CGFloat values that suit your content
webView.scrollView.contentInset = UIEdgeInsetsMake(t,l,b,r);
danh
  • 62,181
  • 10
  • 95
  • 136
4

This appears to fix my issue, not sure how well it work with other PDF documents (Portrait) mine is Landscape and it works fine.

appDelegate.webview = UIWebView()

        appDelegate.webview!.frame = CGRect(x: 0 - 8, y: 0 - 8, width: self.view.bounds.size.width + 14, height: self.view.bounds.size.height + 14)

        appDelegate.webview!.scrollView.frame = CGRect(x: 0 - 8, y: 0 - 8, width: self.view.bounds.size.width + 14, height: self.view.bounds.size.height + 14)

and then for saving the PDF

func createPdfFromView(aView: UIView, saveToDocumentsWithFileName fileName: String)
    {

        let pdfData = NSMutableData()

        UIGraphicsBeginPDFContextToData(pdfData, CGRect(x: 0 + 8, y: 0 - 8, width: aView.bounds.size.width - 17, height: aView.bounds.size.height - 117), nil)

        UIGraphicsBeginPDFPage()

        guard let pdfContext = UIGraphicsGetCurrentContext() else { return }

        aView.layer.renderInContext(pdfContext)
        UIGraphicsEndPDFContext()

        if let documentDirectories = NSSearchPathForDirectoriesInDomains(.DocumentDirectory, .UserDomainMask, true).first {
            let documentsFileName = documentDirectories + "/" + fileName
            debugPrint(documentsFileName)
            pdfData.writeToFile(documentsFileName, atomically: true)
        }
    }

Please let me know if I am doing anything wrong

user979331
  • 11,039
  • 73
  • 223
  • 418
3

It worked for me to apply negative content insets. This works on iOS 11 and 10, on Swift 4:

webView.scrollView.contentInset = UIEdgeInsets(top: -8, left: -8, bottom: -8, right: -8)

Matthew Quiros
  • 13,385
  • 12
  • 87
  • 132
1

I am not sure if you have found the answer but as a quick work around you can give pre adjusted constraint .

lets say if yours padding space is 10px from all 4 sides and if its always a constant

the work around is :

Give -10 space for the webView around it , also make don't forget to add a superview to your webView without the -10px side constraints and mark the superview

clipsToBounds = true 
clipSubViews = true 

enter image description here

DSAjith
  • 362
  • 2
  • 9
0

This example gives a top spacing of 64 to allow for a nav bar.

let webView: UIWebView = UIWebView()

webView.frame = self.view.bounds

webView.scrollView.frame = webView.frame

webView.scrollView.contentInset = UIEdgeInsetsMake(64,0,0,0)
markhorrocks
  • 1,199
  • 19
  • 82
  • 151
0

I don't know why I come here so many times but google never sends me through to the actually answered question. For anyone with the same problem here is the actual answer: https://stackoverflow.com/a/2442859/3393964

The problem is that browsers add a default margin, a simple fix is adding this:

body { margin: 0; padding: 0; }
Casper Zandbergen
  • 3,419
  • 2
  • 25
  • 49
  • In my case, I did this, but the first element was a `

    ` which has a `margin-top` by default. Probably best to add use a CSS reset and explicitly style everything.

    – Sam Soffes Apr 03 '20 at 16:58