How to resize Webview height based on HTML content in Windows 10 UWP?

Question

I am currently working on Windows 10 UWP App and facing an issue with WebView that when I have less HTML content, I am getting more height in javascript. My Code is as follows

WebView webView = new WebView() { IsHitTestVisible = true };
                string notifyJS = @"<script type='text/javascript' language='javascript'>

                                            function setupBrowser(){
                                            document.touchmove=function(){return false;};;
                                            document.onmousemove=function(){return false;};
                                            document.onselectstart=function(){return false;};
                                            document.ondragstart=function(){return false;}
                                            window.external.notify('ContentHeight:'+document.body.firstChild.offsetHeight);
                                            //window.external.notify('ContentHeight:'+document.getElementById('pageWrapper').offsetHeight);
                                            var links = document.getElementsByTagName('a');
                                            for(var i=0;i<links.length;i++) {
                                               links[i].onclick = function() {
                                                    window.external.notify(this.href);
                                                        return false;
                                            }
                                            }
                                        }
                                    </script>";


                string htmlContent;
                if (hexcolor != null)
                {
                    htmlContent = string.Format("<html><head>{0}</head>" +
                                                    "<body onLoad=\"setupBrowser()\" style=\"margin:0px;padding:0px;background-color:{2};\">" +
                                                    "<div id=\"pageWrapper\" style=\"width:100%;word-wrap:break-word;padding:0px 25px 0px 25px\">{1}</div></body></html>",
                                                    notifyJS,
                                                    formItem.I_DEFAULT_VALUE,
                                                    hexcolor);
                }

Here formItem.I_DEFAULT_VALUE is HTML without html,head and body tags and its value is

<p>
<span style="font-size: 14px;">To help us investigate your query please can you make a sheet using the following&nbsp;</span><a href="http://www.pdf995.com/samples/pdf.pdf" style="font-size: 14px;" target="_blank">document</a><span style="font-size: 14px;">.</span></p>
<p>
<strong><span style="font-size: 14px;">Testing WebView Height</span></strong></p>

HexColor is background color that needs to be applied.

And my script_notify method is as follows:

webView.ScriptNotify += async (sender, e) =>
                {
                    if (e.Value.StartsWith("ContentHeight"))
                    {
                        (sender as WebView).Height = Convert.ToDouble(e.Value.Split(':')[1]);
                        return;
                    }

                    if (!string.IsNullOrEmpty(e.Value))
                    {
                        string href = e.Value.ToLower();
                        if (href.StartsWith("mailto:"))
                        {
                            LauncherOptions options = new LauncherOptions();
                            options.DisplayApplicationPicker = true;
                            options.TreatAsUntrusted = true;
                            var success = await Launcher.LaunchUriAsync(new Uri(e.Value), options);
                        }
                        else if (href.StartsWith("tel:"))
                        {
                            LauncherOptions options = new LauncherOptions();
                            options.DisplayApplicationPicker = true;
                            options.TreatAsUntrusted = true;
                            var success = await Launcher.LaunchUriAsync(new Uri(e.Value), options);
                        }

                        else
                        {
                            LauncherOptions options = new LauncherOptions();
                            options.DisplayApplicationPicker = true;
                            options.TreatAsUntrusted = true;
                            var success = await Launcher.LaunchUriAsync(new Uri(e.Value), options);
                        }
                    }
                };

Can someone suggest why I am getting very large height even if content is small?

I made a demo from your codes, but didn't reproduced your problem. The webView's height got resized correctly. Could you please post the codes of `formItem.I_DEFAULT_VALUE` or maybe share a basic demo that can reproduce this problem. And I'm using `WebView.NavigateToString` to render the html content. — Elvis Xia - MSFT, Oct 12 '16 at 08:18
@ElvisXia-MSFT I have added `formItem.I_DEFAULT_VALUE` and I am also using `WebView.NavigateToString`. Also, I am creating `webview` dynamically using C# not XAML. — Kinjan Bhavsar, Oct 12 '16 at 08:49
@ElvisXia-MSFT Also use `window.external.notify('ContentHeight:'+document.body.firstChild.offsetHeight);` — Kinjan Bhavsar, Oct 12 '16 at 08:56
Still not reproduceable. you can try my demo here:[WebViewDynamicHeightSample](https://github.com/elvisxia/WebViewDynamicHeightSample). — Elvis Xia - MSFT, Oct 12 '16 at 09:00
:-( Don't know why it is not working at my side. I will try to create demo project and will check if I can reproduce the issue in that. — Kinjan Bhavsar, Oct 12 '16 at 09:36
@ElvisXia-MSFT Please check your demo in Mobile Emulator. It will give you extra height. — Kinjan Bhavsar, Oct 13 '16 at 08:57
I can reproduce your problem now on windows phone or emulator. I will consult through internal channel. I'll let you know, once I get response. — Elvis Xia - MSFT, Oct 14 '16 at 07:45
@ElvisXia-MSFT OK Thanks.Also, in mobile emulator/phone, it displays small size text if the HTML contains
@KinjanBhavsar Thank you for informing this issue to us, we have logged this issue internally and the related team is investigating it. — Franklin Chen - MSFT, Oct 18 '16 at 06:14
@FranklinChen-MSFT Thanks a lot. Actually, I want to update my app on Windows store so was confirming. — Kinjan Bhavsar, Oct 18 '16 at 06:17
@KinjanBhavsar Understood, currently I'm not sure if there is any workaround, if you have to meet your deadline, a fixed height or something to avoid user's complain may be helpful. — Franklin Chen - MSFT, Oct 18 '16 at 06:22
@FranklinChen-MSFT Can you please tell me whether this issue will be fixed in next SDK Update ? I noticed that it works fine in 10.0.10586 Emulator but when I use 10.0.14393 then it doesn't work. Same for a mobile device. — Kinjan Bhavsar, Nov 04 '16 at 09:54
@FranklinChen-MSFT,@ElvisXia-MSFT Is this resolved in Windows 10.0.15063 Creators Update SDK? — Kinjan Bhavsar, Apr 10 '17 at 11:14

score 5 · Answer 1 · answered Dec 22 '16 at 16:22

you could try to parse the string "document.body.scrollHeight.toString()" after your content loads in order to set a new height for your webview. Here's an example with NavigationCompleted but you could use a custom event

public static class WebViewExtensions  
{
    public static void ResizeToContent(this WebView webView)
    {
        var heightString = webView.InvokeScript("eval", new[] {"document.body.scrollHeight.toString()" });
        int height;
        if (int.TryParse(heightString, out height))
        {
            webView.Height = height;
        }
    }
}

public Page()  
{
    MyWebView.NavigationCompleted += (sender, args) => sender.ResizeToContent();
    MyWebView.Navigate(new Uri("index.html"));
}

Did you tried this? I tried similar in past but didn't worked — Kinjan Bhavsar, Dec 22 '16 at 16:30
Yes last year. But our needs may not be exactly the same. When you say it didn't work, was the value returned by document.body.scrollHeight also to big, or did the "eval" fail ? — Romain Durand, Dec 22 '16 at 16:39

score 0 · Answer 2 · answered Aug 05 '19 at 14:05

I'm not sure why you are getting a value that is too high, I faced a slightly different issue: the height of the document I got was too small (the height did seemingly not account for images). I have tried multiple events (NavigationFinished, LoadCompleted, ...) but in none of these events I was able to get an accurate height.

What finally worked for me was waiting for a short period until I send back the height of the document. Not exactly a great solution, I hope I will be able to simplify this at some point. Perhaps this also works for your issue.

I inject a script that waits for 100 miliseconds and then sends it back. Even if the image wasn't fully loaded yet, the content size was accurate for me.

window.setTimeout(function () {
    var height = document.body.scrollHeight.toString();
    window.external.notify("ContentHeight:" + height);
}, 100);

How to resize Webview height based on HTML content in Windows 10 UWP?

2 Answers2

Linked