CODEWITHSUNDEEP
iosxcodewkwebviewnslayoutconstraint
pretz
pretz

Reputation: 242

Constraints not keeping WKWebView inside Safe Area

Please excuse my ignorance. I am very new to iOS development and Xcode. I have tried searching many pages on this site and haven't found any that directly solve my issue. Any help you can provide would be greatly appreciated!

I am unable to get my webview (WKWebview) to remain within the Safe Area boundaries (I think that's the best way to describe it). I have autogenerated constraints set on the webview and I can see within the Main.Storyboard editor that the webview is within the safe area.

Unfortunately the webview ignores these boundaries and encompasses the entire view and the text on my webpage appears at the top of the display behind the time, battery and connection icons.

What am I doing wrong?

Here is my code and a few pictures:

import UIKit
import WebKit

class ViewController: UIViewController, WKUIDelegate {

    @IBOutlet var webView: WKWebView!

    override func loadView() {
        let webConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.uiDelegate = self
        view = webView
    }
    override func viewDidLoad() {
        super.viewDidLoad()

        let url = Bundle.main.url(forResource: "bulk_material_table", withExtension: "html")!
        webView.loadFileURL(url, allowingReadAccessTo: url)
        let request = URLRequest(url: url)
        webView.load(request)

    }
}

enter image description here

enter image description here

Upvotes: 2

Views: 4321

Answers (2)

MikeMaus
MikeMaus

Reputation: 405

Tried to make this work programmatically. Is it OK? Does anybody know how to change the color of top inset of safe area?

var webView = WKWebView()

override func viewDidLoad() {
    super.viewDidLoad()
    view.addSubview(webView)                        

    guard let url = URL(string: "https://apple.com/") else {
        return
    }
    webView.load(URLRequest(url: url))
}

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    // webView.frame = view.bounds            // previously
    let topPadding = view.safeAreaInsets.top
    webView.frame = view.frame.inset(by: UIEdgeInsets(top: topPadding, left: CGFloat(0), bottom: CGFloat(0), right: CGFloat(0)))
}

it doesn't keep WKWebView inside safe area before and here what I've thought to add

view.insetsLayoutMarginsFromSafeArea = true

Upvotes: 1

M Reza
M Reza

Reputation: 19738

Your constraints are OK. The problem is with your overridden loadView() method. You don't need to create a new WKWebView since you are using storyboards and Interface Builder is creating it. Remove this method and move uiDelegate to viewDidLoad():

import UIKit 
import WebKit

class ViewController: UIViewController, WKUIDelegate {

    @IBOutlet var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()

        webView.uiDelegate = self // Move delegate here

        let url = Bundle.main.url(forResource: "bulk_material_table", withExtension: "html")!
        webView.loadFileURL(url, allowingReadAccessTo: url)
        let request = URLRequest(url: url)
        webView.load(request)
    }     
}

Upvotes: 2

Related Questions