{"id":247,"date":"2010-07-09T11:53:36","date_gmt":"2010-07-09T16:53:36","guid":{"rendered":"http:\/\/www.juggleware.com\/blog\/?p=247"},"modified":"2011-03-01T11:41:37","modified_gmt":"2011-03-01T17:41:37","slug":"how-to-place-a-uiwebview-inside-a-uiscrollview","status":"publish","type":"post","link":"https:\/\/www.juggleware.com\/blog\/2010\/07\/how-to-place-a-uiwebview-inside-a-uiscrollview\/","title":{"rendered":"How To Place a UIWebView inside a UIScrollView"},"content":{"rendered":"            <script type=\"text\/javascript\" src=\"https:\/\/www.juggleware.com\/blog\/wp-content\/plugins\/wordpress-code-snippet\/scripts\/shBrushCpp.js\"><\/script>\n<p>To display several pieces of content on a screen, I needed several views. A scroll view (<code>UIScrollView<\/code>) was necessary to encompass the headline, photo and story text; I had the headline and photo at the top in a fixed area, but the content was of variable size as the story length changed.<\/p>\n<p>Originally I had a text view (<code>UITextView<\/code>) to hold the story, but I wanted to do rich-text formatting, and since my database already used HTML to do italic and bold markup, a web view (<code>UIWebView<\/code>) was the obvious fit.<\/p>\n<p>However, there are some caveats to using web views, most importantly to do with getting the size of the view after you&#8217;ve set the content. First, you must make sure the content has completed loading before you retrieve the size; you can do this in the delegate handler<code>webViewDidFinishLoading:<\/code><\/p>\n<p>Secondly, web views don&#8217;t respond correctly to <code>sizeToFit:<\/code> so you must do some more manual labor using a Javascript call to find the size of the web view after you&#8217;ve inserted the content. Some comments on other web sites mentioned that you can try  <code>[webView sizeThatFits:CGSizeZero]<\/code> but this did not work for me. <\/p>\n<p>Here&#8217;s the pertinent code from my current project. Also please note that I have a <code>&lt;div id=\"body\"&gt;<\/code> surrounding my HTML content that I pass into the view. The javascript call uses this to grab the height of the web view after it loads. You&#8217;ll also notice that this calculation sometimes falls a little short so I add 12 points to it. <\/p>\n<p>The code below creates a UIButton beneath the text copy, so I added 70 pixels to the contentSize of the enclosing scroll view. It works perfectly for me; hopefully it helps someone else, too.<\/p>\n<p>If there&#8217;s a more kosher way to do it, I&#8217;d love to hear it. I had considered putting everything (including the headline and photo) inside the UIWebView, but then I would not have been able to have a UIButton beneath\/outside it off screen; nor, more importantly would I be able to use my custom NetImageViewer class on the photo. (More on that later.)<pre class=\"brush: cpp\">#pragma mark -\r\n#pragma mark UIWebViewDelegate methods \r\n-(void)webViewDidFinishLoad:(UIWebView *)webView{\r\n\tif (webView!=bioWebView)return;\r\n\r\n\tfloat h;\r\n\t\r\n\tNSLog(@&quot;web view is %f high&quot;, bioWebView.frame.size.height);\r\n\tNSString *heightString = [bioWebView stringByEvaluatingJavaScriptFromString:@&quot;document.getElementById(&quot;body&quot;).offsetHeight;&quot;];\r\n\tNSLog(@&quot;web content is %@ high&quot;,heightString);\r\n\t\r\n\th = [heightString floatValue] +12.0f; \/\/ convert from string to float plus some extra points because calculation is sometimes one line short\r\n\t\r\n\tbioWebView.frame = CGRectMake(bioWebView.frame.origin.x, bioWebView.frame.origin.y, bioWebView.frame.size.width, h);\r\n\t\r\n\t\/\/ get bottom of text field\r\n\th = bioWebView.frame.origin.y + h + 70; \/\/ extra 70 pixels for UIButton at bottom and padding.\r\n\t[scrollView setContentSize:CGSizeMake(320, h)];\r\n\t\r\n\t\/* \r\n\r\n        position button code here.... \r\n\r\n        *\/\r\n\r\n}\r\n<\/pre><\/p>\n","protected":false},"excerpt":{"rendered":"<p>To display several pieces of content on a screen, I needed several views. A scroll view (UIScrollView) was necessary to encompass the headline, photo and story text; I had the headline and photo at the top in a fixed area, &hellip; <a href=\"https:\/\/www.juggleware.com\/blog\/2010\/07\/how-to-place-a-uiwebview-inside-a-uiscrollview\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,49],"tags":[72,113,71,70,69],"class_list":["post-247","post","type-post","status-publish","format-standard","hentry","category-iphone-dev","category-programming","tag-ios","tag-iphone-dev","tag-objective-c","tag-uiscrollview","tag-uiwebview"],"_links":{"self":[{"href":"https:\/\/www.juggleware.com\/blog\/wp-json\/wp\/v2\/posts\/247","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.juggleware.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.juggleware.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.juggleware.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.juggleware.com\/blog\/wp-json\/wp\/v2\/comments?post=247"}],"version-history":[{"count":7,"href":"https:\/\/www.juggleware.com\/blog\/wp-json\/wp\/v2\/posts\/247\/revisions"}],"predecessor-version":[{"id":355,"href":"https:\/\/www.juggleware.com\/blog\/wp-json\/wp\/v2\/posts\/247\/revisions\/355"}],"wp:attachment":[{"href":"https:\/\/www.juggleware.com\/blog\/wp-json\/wp\/v2\/media?parent=247"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.juggleware.com\/blog\/wp-json\/wp\/v2\/categories?post=247"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.juggleware.com\/blog\/wp-json\/wp\/v2\/tags?post=247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}