CODEWITHSUNDEEP
ioscssuiwebviewwkwebview
Александр Савинов
Александр Савинов

Reputation: 303

Strange padding while using UIWebView/WKWebView

sides padding

On emulator and real device I get this white padding in the left and right sides of the page. Also I would like to remove top bar too. I have UIWebView/WKWebView on the Main.storyboard: Constrains

I tried to set -20 value of constrains but it gives nothing. Here the code:

 @IBOutlet var webView: WKWebView!


    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        self.automaticallyAdjustsScrollViewInsets = false;

        let url = NSURL(string: "https://www.google.ru/");
        var req = NSURLRequest(URL: url!);
        webView.loadRequest(req);

    }

and also I tried add body { padding: 0; margin: 0; } to mine own page before I started testing on google. I checked Safari - it's fit google pictures perfect. So nothing of what I tried didn't help me. How can I remove those left/right white padding in WKWebView?

Upvotes: 10

Views: 5079

Answers (2)

Ashi
Ashi

Reputation: 161

Use this line to remove padding from top.

self.webView = WKWebView(frame: .zero, configuration: config) self.webView.scrollView.contentInsetAdjustmentBehavior = .never

Upvotes: 1

Bueno
Bueno

Reputation: 1950

Looks like out of box WKWebView sets a margin on the body tag. You can remove this by creating a WKWebViewConfiguration and adding initializing with the configuration including the body style with margin 0.

let config = WKWebViewConfiguration()
let bodyStyle = "body { margin:0; }"
let source = "var node = document.createElement(\"style\"); node.innerHTML = \"\(bodyStyle)\";document.body.appendChild(node);"

let script = WKUserScript(
            source: source,
            injectionTime: .AtDocumentEnd,
            forMainFrameOnly: false
        )

config.userContentController.addUserScript(script)
webView = WKWebView(frame: CGRectZero, configuration: config)

Or the quick and dirty way would be to just add an inline style to you view. (I haven't tried this way)

Upvotes: 15

Related Questions