title: How to auto size UITableViewCell with underlying WKWebKit, so it respects the content of the web view?
body: <p>In my iOS app I want to display several items that contain some HTML. For this I've build a <strong>NewsListViewController</strong> that contains a <strong>UITableView</strong>. For that <strong>UITableView</strong> (outlet: <em>newsListTableView</em>) I created a custom <strong>UITableViewCell</strong> called <strong>NewsTableViewCell</strong> that will be load into it via delegates. The <strong>NewsTableViewCell</strong> holds a <strong>WKWebKit</strong> control that will display my HTML. This is my code:</p>
  
  <p><strong>NewsListViewController.swift</strong></p>
  
  <pre><code>import UIKit
  
  class NewsListViewController: UIViewController {
  
      @IBOutlet weak var newsListTableView: UITableView!
  
      override func viewDidLoad() {
          super.viewDidLoad()
  
          self.newsListTableView.delegate = self
          self.newsListTableView.dataSource = self
          self.newsListTableView.register(UINib(nibName: "NewsTableViewCell", bundle: nil), forCellReuseIdentifier: "cell")
      }
  
  }
  
  extension NewsListViewController: UITableViewDelegate {
  
  }
  
  extension NewsListViewController: UITableViewDataSource {
  
      func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -&gt; Int {
          return 3
      }
  
      func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -&gt; CGFloat
      {
          return 300.0
      }
  
      func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -&gt; UITableViewCell {
          let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! NewsTableViewCell
          cell.titleText = "My Title"
          cell.dateTimeText = "01.01.1998"
          cell.contentHtml = "&lt;html&gt;&lt;head&gt;&lt;meta name=\"viewport\" content=\"initial-scale=1.0\" /&gt;&lt;style&gt;html, body { margin: 0; padding: 0; font-size: 15px; }&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;b&gt;Hello News&lt;/b&gt;&lt;br /&gt;Hello News&lt;br /&gt;Hello News&lt;br /&gt;Hello News&lt;/body&gt;&lt;/html&gt;"
          return cell
      }
  
  }
  </code></pre>
  
  <p><strong>NewsTableViewCell.xib</strong></p>
  
  <p><a href="https://i.stack.imgur.com/8dH1d.png" rel="noreferrer"><img src="https://i.stack.imgur.com/8dH1d.png" alt="NewsTableViewCell.xib preview"></a></p>
  
  <p>My <strong>WKWebKit</strong> (outlet: <em>newsContentPreviewWebView</em>) is lying inside of an <strong>UIView</strong> (outlet: <em>newsContentViewContainer</em>) with proper constraints to grow with the <strong>UIView</strong>. My <strong>UIView</strong> comes with proper constraints to grow with the whole cell, too.</p>
  
  <p><strong>NewsTableViewCell.swift</strong></p>
  
  <pre><code>import UIKit
  import WebKit
  
  @IBDesignable class NewsTableViewCell: UITableViewCell {
  
      @IBOutlet weak var titleLabel: UILabel!
      @IBOutlet weak var dateTimeLabel: UILabel!
      @IBOutlet weak var newsContentViewContainer: UIView!
      @IBOutlet weak var newsContentPreviewWebView: WKWebView!
  
      @IBInspectable var titleText: String? {
          get {
              return self.titleLabel.text
          }
          set(value) {
              self.titleLabel.text = value
          }
      }
  
      @IBInspectable var dateTimeText: String? {
          get {
              return self.dateTimeLabel.text
          }
          set(value) {
              self.dateTimeLabel.text = value
          }
      }
  
      @IBInspectable var contentHtml: String? {
          get {
              return nil
          }
          set(value) {
              self.newsContentPreviewWebView.loadHTMLString(value ?? "", baseURL: nil)
          }
      }
  
      override func awakeFromNib() {
          super.awakeFromNib()
  
          self.newsContentPreviewWebView.navigationDelegate = self
      }
  
  }
  
  extension NewsTableViewCell: WKNavigationDelegate {
  }
  </code></pre>
  
  <p>This is the result:</p>
  
  <p><a href="https://i.stack.imgur.com/H74VL.png" rel="noreferrer"><img src="https://i.stack.imgur.com/H74VL.png" alt="App preview without auto sizing"></a></p>
  
  <p>Now, I want the cells to be as small as possible, but still displaying the full <strong>WKWebKit</strong> content.</p>
  
  <p>When I remove ...</p>
  
  <pre><code>func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -&gt; CGFloat
  {
      return 300.0
  }
  </code></pre>
  
  <p>... from <strong>NewsListViewController.swift</strong> the cell height will only respect the labels above the <strong>WKWebKit</strong> control:</p>
  
  <p><a href="https://i.stack.imgur.com/0ZOdt.png" rel="noreferrer"><img src="https://i.stack.imgur.com/0ZOdt.png" alt="App preview showing failed auto sizing of the cell"></a></p>
  
  <p>I think this is happening, because my <strong>WKWebKit</strong>'s content is not loaded when the app sizes the cells.</p>
  
  <p>I tried to overcome this problem by listening to the <strong>WKWebKit</strong>'s >> did finish navigation &lt;&lt; delegate call in my <strong>NewsTableViewCell.swift</strong> and resizing the parent view and whole cell height like so:</p>
  
  <pre><code>extension NewsTableViewCell: WKNavigationDelegate {        
      func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
          webView.evaluateJavaScript("document.readyState", completionHandler: { (complete, error) in
              if complete != nil {
                  webView.evaluateJavaScript("document.body.scrollHeight", completionHandler: { (height, error) in
                      let h: CGFloat = height as! CGFloat
  
                      let newsContentFrame: CGRect = self.newsContentViewContainer.frame
                      self.newsContentViewContainer.frame = CGRect(x: newsContentFrame.minX, y: newsContentFrame.minY, width: newsContentFrame.width, height: h)
  
                      let tableCellFrame: CGRect = self.frame
                      self.frame = CGRect(x: tableCellFrame.minX, y: tableCellFrame.minY, width: tableCellFrame.width, height: tableCellFrame.height + h)
                  })
              }
          })
      }
  }
  </code></pre>
  
  <p>This is the result:</p>
  
  <p><a href="https://i.stack.imgur.com/tt4p0.png" rel="noreferrer"><img src="https://i.stack.imgur.com/tt4p0.png" alt="App preview showing overlapping of cells when trying to set the size, manually"></a></p>
  
  <p>The cells are overlapping which indicates that I'm trying to solve this in the wrong way.</p>
  
  <p>What is the correct way to auto size the custom table cells to fit all its content including the content of the <strong>WKWebKit</strong>?</p>