Kiran
Kiran

Reputation: 127

UITableViewCell height automatically not resizing

I have UIView inside tablecell and inside UIView I have WKWebView. UITableView.automaticDimension is working and the data inside webview is visible only when the UIView height is set . otherwise it is not . But I want the UIView height is dynamic according to the content inside it .

StoryBoardImageLink

here is my code for WebView :

var webView = WKWebView()
var htmlStrings: String?

@IBOutlet weak var webViewContainer: UIView!

var oiiiiurHtmlString = "<div class=\"html-content pdp-product-highlights\">\n<p><b data-spm-anchor-id=\"a2a0e.pdp.product_detail.i4.a55420b7mofmmi\">SPECIFICATIONS</b></p>\n<ul class=\"\">\n<li class=\"\" data-spm-anchor-id=\"a2a0e.pdp.product_detail.i2.a55420b7mofmmi\">Brand: Samsung</li><li class=\"\" data-spm-anchor-id=\"a2a0e.pdp.product_detail.i2.a55420b7mofmmi\">Brand: Samsung</li><li class=\"\" data-spm-anchor-id=\"a2a0e.pdp.product_detail.i2.a55420b7mofmmi\">Brand: Samsung</li><li class=\"\" data-spm-anchor-id=\"a2a0e.pdp.product_detail.i2.a55420b7mofmmi\">Brand: Samsung</li><li class=\"\" data-spm-anchor-id=\"a2a0e.pdp.product_detail.i2.a55420b7mofmmi\">Brand: Samsung</li><li class=\"\" data-spm-anchor-id=\"a2a0e.pdp.product_detail.i2.a55420b7mofmmi\">Brand: Samsung</li><li class=\"\" data-spm-anchor-id=\"a2a0e.pdp.product_detail.i2.a55420b7mofmmi\">Brand: Samsung</li><li class=\"\" data-spm-anchor-id=\"a2a0e.pdp.product_detail.i2.a55420b7mofmmi\">Brand: Samsung</li><li class=\"\" data-spm-anchor-id=\"a2a0e.pdp.product_detail.i2.a55420b7mofmmi\">Brand: Samsung</li>\n<li class=\"\">Model No: RR19M20A2RH</li>\n<li class=\"\">Color: Scarlet Red</li>\n<li class=\"\">Capacity: 192Ltrs</li>\n\n</ul>\n</div>\n"

var a = "<html><body><font size = 50px face = Avenir"
var b = "</font></body></html>"

override func awakeFromNib() {
    super.awakeFromNib()
    htmlStrings = a + oiiiiurHtmlString + b
    productDetailsWebView()       
}

func productDetailsWebView(){
    let webConfiguration = WKWebViewConfiguration()
    let customFrame = CGRect.init(origin: CGPoint.zero, size: CGSize.init(width: 0.0, height: self.webViewContainer.frame.size.height))
    self.webView = WKWebView (frame: customFrame , configuration: webConfiguration)
    webView.loadHTMLString(htmlStrings!, baseURL: nil)
    webView.translatesAutoresizingMaskIntoConstraints = false
    self.webViewContainer.addSubview(webView)
    webView.topAnchor.constraint(equalTo: webViewContainer.topAnchor).isActive = true
    webView.rightAnchor.constraint(equalTo: webViewContainer.rightAnchor).isActive = true
    webView.leftAnchor.constraint(equalTo: webViewContainer.leftAnchor).isActive = true
    webView.bottomAnchor.constraint(equalTo: webViewContainer.bottomAnchor).isActive = true
    webView.heightAnchor.constraint(equalTo: webViewContainer.heightAnchor).isActive = true
    webView.uiDelegate = self
}

Upvotes: 0

Views: 501

Answers (3)

Glenn Posadas
Glenn Posadas

Reputation: 13300

This answer assumes the following:

  1. You know how to pass some data from a cell to your controller (perhaps through delegate).
  2. You know how to setup constraints properly, remember you need to satisfy all the constraints of your view to stretch out your cell.

So, I posted an answer here https://stackoverflow.com/a/54276004/3231194 on how to observe the total content size (height) of your WKWebView. Check that one out.

That's exactly what you need, and then after setting the constraint height of your WKWebView properly, inform the controller to reload your tableView, or reload such specific row/section that holds your webView.

Upvotes: 0

cyril
cyril

Reputation: 3005

Your vertical constraints look a little weird to me. Can you set them in the following way? (See attached). Make sure there is a set flow of vertical constraints connecting the top of the cell to the bottom - this is what dictates how the cell will resize.

Once you've set your constraints as shown below, create a new constraint from the bottom of other content to the bottom of the cell and set its value to greater than or equal to 20 (or any other value)

Finally, in your view controller, make sure to call the following:

tableView.rowHeight = UITableViewAutomaticDimension
tableView.estimatedRowHeight = 200 //Again you can change this to whatever suits your needs

Note: Make sure you tie the constraints of the web view to its parent view. And set a minimum height for the parent view.

enter image description here

Upvotes: 1

Nishant Pathania
Nishant Pathania

Reputation: 349

add following code in "cellForRowAtIndexPath" method before return cell.

cell.setNeedsUpdateConstraints()
cell.updateConstraintsIfNeeded()

Upvotes: 0

Related Questions