How can I create a table view cell that changes its height dynamically to fit its content?

Question

I'm displaying some markdown that the user wrote in a table view. The way I display these markdown texts is to convert the markdown to HTML and then display the HTML on a UIWebview. Because, well, I can use some cool CSS.

After some research, I found that I can set estimatedRowHeight to some stuff and set rowHeight to UITableViewAutomaticDimension. I also found out how to set a UIWebView's frame so that it fits its content here:

So I wrote this code:

var results: [Entry] = []

override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
    return 1
}

override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return results.count
}

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCellWithIdentifier("resultCell")
    let webView = cell?.contentView.viewWithTag(1) as! UIWebView
    let entry = results[indexPath.row]
    webView.loadHTMLString(entry.htmlDescription, baseURL: nil)
    webView.delegate = self
    
    return cell!
}

override func viewDidAppear(animated: Bool) {
    super.viewDidAppear(animated)
    tableView.reloadData()
}

override func viewDidLoad() {
    tableView.estimatedRowHeight = 400
    tableView.rowHeight = UITableViewAutomaticDimension
}

func webViewDidFinishLoad(webView: UIWebView) {
    let height = CGFloat(webView.stringByEvaluatingJavaScriptFromString("document.height")!.toFloat()!)
    var frame = webView.frame
    frame.size.height = height
    webView.frame = frame
    webView.scrollView.contentSize = frame.size
    webView.scrollView.frame = frame
    
    print(frame)
}

The results array is just the stuff I'm displaying. As you can see, I want to display the result's htmlDescription in each web view.

And in the webViewDidFinishLoad delegate method, I just did what the aforementioned post did: evaluating some JS and updating the web view's frame.

However, the behaviour is far from what I expected.

Firstly, the table view cells' heights are the default heights.
When I try to scroll the web views, I can't. They simply bounce back.
The console says that:

Warning once only: Detected a case where constraints ambiguously suggest a height of zero for a tableview cell's content view. We're considering the collapse unintentional and using standard height instead.

I don't know what is suggesting that the table view cell's height should be 0.

The console also prints the new frames of the web views. I only have 3 web views but there are 6 frames:

(0.0, 0.0, 320.0, 315.0)

(0.0, 0.0, 320.0, 363.0)

(0.0, 0.0, 320.0, 216.0)

(0.0, 0.0, 320.0, 315.0)

(0.0, 0.0, 320.0, 363.0)

(0.0, 0.0, 320.0, 216.0)

And the height seems to be pretty correct, not the default table view cell height.

I know that I can fix this if I could either:

know the content size of the web view before the HTML is loaded, or;
reload the table view when all web views finish loading. (Since I will possibly have lots of web views, I should call reloadData as less as possible or it will e very slow.)

How can I do this?

This is not a duplicate of How to make UITableViewCell adjust height to fit its content? because that question's table view is kind of static. Its content won't change once it is loaded. But mine has a web view which will load HTML.

How can I create a table view cell that changes its height dynamically to fit its content?

Answers (1)

Related Questions