Implementing UIWebView inside UIScrollView

Question

I'm trying to use UIWebView inside UIScrollView, I want to display an webview under an image and make them scrollable. So I flowed those step :

Desactivate the Scroll Property for UIWebView
Set the UIScrollView and UIWebView height equals to content size.

And this my code :

- (void)viewDidLoad {
    [super viewDidLoad];

        self.contentReader.scrollView.scrollEnabled = NO;
        NSString *myDescriptionHTML = [NSString stringWithFormat:@"<html> \n"
                                       "<head> \n"
                                       "<style type=\"text/css\"> \n"
                                       "body {font-family: \"%@\"; font-size: %d;}\n"
                                       "</style> \n"
                                       "</head> \n"
                                       "<body>%@</body> \n"
                                       "</html>", @"JF Flat", 18, self.thePost.content];

        [self.contentReader loadHTMLString:[NSString stringWithFormat:@"<div style='text-align:right; text-align:justify; direction:rtl'><style type='text/css'>img { max-width: 100%%; width: auto; height: auto; }</style><style type='text/css'>iframe { max-width: 100%%; width: auto; height: auto; }</style>%@<div>",myDescriptionHTML] baseURL:nil];

    }
    -(void)webViewDidFinishLoad:(UIWebView *)webView {
        // get the html content height
        NSString *output = [webView stringByEvaluatingJavaScriptFromString:@"document.height;"];
        NSLog(@"Content Size %@",output);
        // adjust the height of webView
        NSLog(@"WebView Hieght before Update%f", webView.frame.size.height);
        CGRect frame = webView.frame;
        frame.size.height = 1;
        webView.frame = frame;
        CGSize fittingSize = [webView sizeThatFits:CGSizeZero];
        frame.size = fittingSize;
        webView.frame = frame;
        NSLog(@"WebView Hieght After Update%f", webView.frame.size.height);
        [self.scroller setContentSize:webView.bounds.size];
    }

And This is the Log message :

[5150:203791] WebView Hieght before Update360.000000
[5150:203791] WebView Hieght After Update5888.000000

The Problem is that when I scroll down the content is not showed, nothing is showed. check the picture : enter image description here

Update Debug View Hearachy. enter image description here

As you can see the WebView height in the view hierarchy hasn't changed. Only the web page has changed the size.

you should debug the view hierarchy to see if the webView and scrollView frames are adjusted correctly. The log messages seem right. — Ortwin Gentz
Just a thought but have you considered the user experience for this? Because really you're going to end up with a scrollview (UIWebView) inside a scrollview and that can be really annoying sometimes for users when scrolling the wrong view. — Popeye
@Popeye I have desabled the webview scrolling property to avoid this confusion. Also I need to display an image with some text and under it HTML text this why I used imageview and uiwebview inside scrollview. Also do have any suggestion or solution to achieve what I need to display please ? — Chlebta
Indeed, that's the issue. Are you using perhaps Auto Layout? Then you can't set the frame manually but have to alter the constant of a height constraint. — Ortwin Gentz

Ortwin Gentz Ortwin Gentz · Accepted Answer · 2015-02-12T22:53:53

We already solved it in the comments, so let's just put this answer for completeness' sake.

If you're using Auto Layout, make sure to change the size of the WebView by setting constraints such as a height constraint and changing its constant to make the layout change. If you want to animate a specific Auto Layout change, do something like this:

[UIView animateWithDuration:0.5 animations:^{
    self.webViewHeightConstraint.constant = fittingSize.height;
    [self.view layoutIfNeeded];
}];

Implementing UIWebView inside UIScrollView

2 Answers