How to determine UIWebView height based on content, within a variable height UITableView?

Question

I am trying to create a UITableView with variable height rows as explained in the answer to this question

My problem is each cell contains a UIWebView with different (statically loaded) content I can't figure out how to calculate the proper height based on the content. Is there a way to do this? I've tried things like this:

   (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
       WebViewCell *cell = (WebViewCell*)[self tableView:tableView cellForRowAtIndexPath:indexPath];
       [cell setNeedsLayout];
       [cell layoutIfNeeded];
       return cell.bounds.size.height;
    }

The cells themselves are loaded from a nib, which is simply a UITableViewCell containing a UIWebView. (It would also be fine if the cells just adjusted themselves to the largest of the html content, though variable height would be nicer).

Did you ever figure out how to do this? The answers below seem to get you the height, but not until after you need it. How can you compute the height for heightForRowAtIndexPath is you have to rely on a callback (webview delegate) call in webViewDidFinishLoad? — pbx, Mar 13 '12 at 05:17
Hi then finally how u determine the height of the webview I am also having the same problem... — Nik's, Apr 28 '12 at 12:35

score 77 · Answer 1 · answered Apr 15 '09 at 11:41

77

This code is probably too slow for table view use, but does the trick. It doesn't look like there's any alternative, as UIWebView offers no direct access to the DOM.

In a view controller's viewDidLoad I load some HTML in a webview and when the load is finished run some javascript to return the element height.

- (void)viewDidLoad
{
    [super viewDidLoad];
    webview.delegate = self;
    [webview loadHTMLString:@"<div id='foo' style='background: red'>The quick brown fox jumped over the lazy dog.</div>" baseURL:nil];
}

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    NSString *output = [webview stringByEvaluatingJavaScriptFromString:@"document.getElementById(\"foo\").offsetHeight;"];
    NSLog(@"height: %@", output);
}

answered Apr 15 '09 at 11:41

duncanwilcox

3,498
21
18

Sounds like it can be made work, however I've tried this in the table view and it returns an empty string (I guess because the webview had not finished loading). I'm thinking I could precompute this with an offscreen webview perhaps and cache the results for the tableview. – frankodwyer Apr 25 '09 at 23:49
Are you measuring the height in the webViewDidFinishLoad? That's the delegate callback indicating that load is complete. It shouldn't return an empty string. – duncanwilcox Apr 27 '09 at 18:50
This is almost exactly what I do. Although I am having a problem with the fact that the webview can't return its size until it has finished loading, which it might not have when the table needs to know its size. Does anyone have an idea of how to solve this? – Erik B Jun 14 '10 at 13:49
37

I used instead: NSString *output = [webView stringByEvaluatingJavaScriptFromString:@"document.body.scrollHeight;"]; – BadPirate Oct 20 '10 at 18:32
3

With iOS 4.3 I had to do the following : the a tiny height for my webView (ie 1px) and do the call recommended by BadPirate and adjust both the scroll view's content value and the web view's frame value afterwards. – Mick F Mar 30 '11 at 17:06
2

You must set the height of the initial UIWebView to at least 1px, otherwise when making the JS call you'll get the screen height returned instead. – Vadoff Sep 11 '13 at 02:41

score 28 · Answer 2 · answered Jun 06 '09 at 13:09

28

I was very glad to find your answers, the javascript trick worked well for me.

However, I wanted to say that there is also the "sizeThatFits:" method :

CGSize goodSize = [webView sizeThatFits:CGSizeMake(anyWidth,anyHeigth)];

We have to set a preferred size different from zero, but apart from that, it usually always works !

Usually, because with the UIWebViews, it seems to work only on the second loading (I use the "loadHTMLString:" method, and yes I call "sizeThatFits:" from the delegate "didFinishLoad:" method).

So, that's why I was very happy to find your solution which works in any case.

answered Jun 06 '09 at 13:09

Unfalkster

683
5
12

@Shade: See my answer how to make this work on newer iOS versions. – Ortwin Gentz Mar 10 '11 at 12:49
BE CAREFUL with this answer! Sometimes it returns wrong `height`! I'm getting wrong value when use it with many images – Andrey Gordeev May 24 '16 at 17:31

score 6 · Answer 3 · answered Aug 06 '09 at 23:26

This seems to work. For now.

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    CGFloat webViewHeight = 0.0f;
    if (self.subviews.count > 0) {
        UIView *scrollerView = [self.subviews objectAtIndex:0];
        if (scrollerView.subviews.count > 0) {
            UIView *webDocView = scrollerView.subviews.lastObject;
            if ([webDocView isKindOfClass:[NSClassFromString(@"UIWebDocumentView") class]])
                webViewHeight = webDocView.frame.size.height;
        }
    }
}

It should safely return 0 if it fails.

How is this better than: [webview stringByEvaluatingJavaScriptFromString:@"document.getElementById(\"foo\").offsetHeight;"];? The problem is that the webview can't return its size until it has finished loading, which it might not have when the table needs to know its size. — Erik B, Jun 14 '10 at 13:43

score 4 · Answer 4 · answered Aug 29 '15 at 23:43

4

The better approach is to use scrollView.contentSize.height property, like below.

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
     NSLog(@"%f",webView.scrollView.contentSize.height);   
}

answered Aug 29 '15 at 23:43

Ans

3,461
3
23
24

1

For me, it's scrollView.contentSize.height - CGRectGetHeight(scrollView.frame). http://stackoverflow.com/a/39386880/1677041 – Itachi Sep 08 '16 at 09:17

score 4 · Answer 5 · edited May 23 '17 at 12:26

4

The problem with -sizeThatFits: is that it doesn't work out of the box, at least not on iOS 4.1. It just returns the current size of the webView (no matter whether it's called with CGSizeZero or an arbitrary non-zero size).

I found out that it actually works if you reduce the frame height of the webView prior to calling -sizeThatFits:.

See my solution: How to determine the content size of a UIWebView?

edited May 23 '17 at 12:26

Community

1
1

answered Oct 14 '10 at 21:13

Ortwin Gentz

52,648
24
135
213

thank you for the pointer. I did see your solution when I had this problem, but it doesn't work any better in my case. I don't really remember what I needed this for, but I did it in a different way in the end. – Shade Mar 10 '11 at 14:44

score 3 · Answer 6 · answered Nov 24 '12 at 11:01

3

measuring a webview works but only when it has loaded its content

making webview small (like 5px)
load it and wait for finish
calling sizeToFit on it then
getting the size THEN
reload the tableview (return the correct height for the cell)

advertisement: :D see my M42WebviewTableViewCell class on github which struggles with this

answered Nov 24 '12 at 11:01

Daij-Djan

49,552
17
113
135

That works! Thanks, I used before approach with javascript, but this one works better for me. – Stan Jul 22 '13 at 11:56

score 3 · Answer 7 · answered Aug 09 '10 at 12:31

3

If you have bad values with sizeThatFits the first time but not after, here a possible cause I've encountered : a bug with external CSS. It seems webViewDidFinisLoad is called to soon, before external CSS are retrieved, and the web document fully built. I think the bug disappears if you reload because of the cache.

A trick : Preload your CSS with a dummy UIWebView soon in your application.

SDK : IOS4

answered Aug 09 '10 at 12:31

Kabhal

31
1

In my case it was not so much the CSS that was loaded late, but more specifically a font-file in the CSS. – beetstra May 31 '12 at 15:22

How to determine UIWebView height based on content, within a variable height UITableView?

7 Answers7

Linked