Resize a custom user control to fit the data in the webBrowser control

Question

I have a webBrowser control named webBrowser1 that is added and pinned as DockStyle.Full in a user control. The web browser accepts the HTML text dynamically and displays it. I disabled the scrollbars of the webBrowser control. My problem is that whenever the content is somewhat long, webBrowser hides it from the bottom. But the requirement of my project goal is that the web browser should not show scrollbars or should not hide part of the content. The content should be fully displayed, as it does not have scrolling. This means that the user control on which the webBrowser is webBrowser must resize to fit the contents of the webBrowser . So can anyone suggest me how to achieve this? I searched all over the internet and SO but found nothing.

Answer 1

You can get the current HTML window size through WebBrowser.Document.Window.Size and resize the container accordingly. Depending on how your WebBrowser control content receives dynamic updates, you may need to do this after each update. You can also try WebBrowser.Document.Body.ScrollRectangle if Document.Window.Size does not grow as expected.

[EDITED] The following code works for me (IE10):

 private void Form1_Load(object sender, EventArgs e) { this.BackColor = System.Drawing.Color.DarkGray; this.webBrowser.ScrollBarsEnabled = false; this.webBrowser.Dock = DockStyle.None; this.webBrowser.Location = new System.Drawing.Point(0, 0); this.webBrowser.Size = new System.Drawing.Size(320, 200); DownloadAsync("http://www.example.com").ContinueWith((task) => { var html = task.Result; MessageBox.Show(String.Format( "WebBrowser.Size: {0}, Document.Window.Size: {1}, Document.Body.ScrollRectangle: {2}\n\n{3}", this.webBrowser.Size, this.webBrowser.Document.Window.Size, this.webBrowser.Document.Body.ScrollRectangle.Size, html)); this.webBrowser.Size = this.webBrowser.Document.Body.ScrollRectangle.Size; }, TaskScheduler.FromCurrentSynchronizationContext()); } async Task<string> DownloadAsync(string url) { TaskCompletionSource<bool> onloadTcs = new TaskCompletionSource<bool>(); WebBrowserDocumentCompletedEventHandler handler = null; handler = delegate { this.webBrowser.DocumentCompleted -= handler; // attach to subscribe to DOM onload event this.webBrowser.Document.Window.AttachEventHandler("onload", delegate { // each navigation has its own TaskCompletionSource if (onloadTcs.Task.IsCompleted) return; // this should not be happening // signal the completion of the page loading onloadTcs.SetResult(true); }); }; // register DocumentCompleted handler this.webBrowser.DocumentCompleted += handler; // Navigate to url this.webBrowser.Navigate(url); // continue upon onload await onloadTcs.Task; // the document has been fully loaded, can access DOM here // return the current HTML snapshot return ((dynamic)this.webBrowser.Document.DomDocument).documentElement.outerHTML.ToString(); } 

Answer 2

To resize user controls, you first need to get the size needed for the content. This can be achieved using TextRender.MeasureText , for example:

 public static int GetContentHeight(string content, Control contentHolder, Font contentFont) { Font font = (contentFont != null) ? contentFont : contentHolder.Font; Size sz = new Size(contentHolder.Width, int.MaxValue); int padding = 3; int borders = contentHolder.Height - contentHolder.ClientSize.Height; TextFormatFlags flags = TextFormatFlags.WordBreak; sz = TextRenderer.MeasureText(content, contentHolder.Font, sz, flags); int cHeight = sz.Height + borders + padding; return cHeight; } 

In your case, this is a little more complicated, since the text contains HTML tags that need to be filtered to get the correct height. I believe this can be achieved using RegEx or a simple algorithm that removes all content between <and> from a string .. You may also need to create special hand-held text for some HTML tags (IE lists)