Resizing WP8 WebBrowser Height to Fit Content

Question

i have webbrowser control where i am displaying the content.

Here is the code :

<Grid MinHeight="80"
              Grid.Row="2"
              Background="Red"
              HorizontalAlignment="Stretch"
              VerticalAlignment="Stretch">
            <phone:WebBrowser Name="webBrowser1"
                              Height="Auto"
                              IsScriptEnabled="True"
                              ScriptNotify="webBrowser1_ScriptNotify"
                              HorizontalAlignment="Stretch" 
                              VerticalAlignment="Stretch"
                              VerticalContentAlignment="Center" 
                              HorizontalContentAlignment="Center" 
                              Foreground="Black" Width="Auto"></phone:WebBrowser>
        </Grid>

In .CS file;

   webBrowser1.NavigateToString("<html><head></head><body bgcolor=#d5e1f3><p style=font-family:arial><font size=3><center>" + content + "</center></font></p></body></html>");

here content is:

  string content = "Which word in the following sentence is the subject?<I>Paris is beautiful during Spring.</I>Which word in the following sentence is the subject Which word in the following sentence is the subject Which word in the following sentence is the subject";

But i have searched for this issue and found many posts but none of them works for me:

1) Vertical stretch WebBrowser to fit content inside

2) http://dan.clarke.name/2011/05/resizing-wp7-webbrowser-height-to-fit-content/

3) http://social.msdn.microsoft.com/Forums/wpapps/en-US/232eb27e-5a40-4725-a1dd-f68379dc76b7/webbrowser-sizing-to-fit-content?forum=wpdevelop

4) http://i.nt.ro/how-do-you-resize-a-webbrowser-control-to-fit-on-a-html-element/

How to solve this issue ?

EDIT

Ok the complete XAMl:

<phone:PhoneApplicationPage
    x:Class="POCBase.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Name="AppName" Text="" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock Name="PageName" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid MinHeight="80" 
              Grid.Row="1"
              Background="Red"
              HorizontalAlignment="Stretch"
              VerticalAlignment="Center">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.20*"></ColumnDefinition>
                <ColumnDefinition Width="0.80*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Image Height="60" 
                   Width="60"
                   Grid.Column="0"
                   Margin="0,0,20,0"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Right"></Image>
            <TextBlock Text="Addition Rule "
                       Name="Inilinetext"
                       FontSize="32"
                       Grid.Column="1"
                       TextWrapping="Wrap"
                       Padding="10,0,0,0"
                       VerticalAlignment="Center"
                       HorizontalAlignment="Left"
                       TextAlignment="Left"></TextBlock>
        </Grid>
        <Grid MinHeight="80"
              Grid.Row="2"
              Background="Red"
              HorizontalAlignment="Stretch"
              VerticalAlignment="Stretch">
            <phone:WebBrowser Name="webBrowser1"
                              Height="Auto"
                              IsScriptEnabled="True"
                              ScriptNotify="webBrowser1_ScriptNotify"
                              HorizontalAlignment="Stretch" 
                              VerticalAlignment="Stretch"
                              VerticalContentAlignment="Center" 
                              HorizontalContentAlignment="Center" 
                              Foreground="Black" Width="Auto"></phone:WebBrowser>
        </Grid>

        <Grid MinHeight="80" 
              Grid.Row="3"
              Background="Red"
              HorizontalAlignment="Stretch"
              VerticalAlignment="Stretch">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.20*"></ColumnDefinition>
                <ColumnDefinition Width="0.80*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Image Height="60" 
                   Width="60"
                   Grid.Column="0"
                   Margin="0,0,20,0"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Right"></Image>
            <TextBlock Text="Addition Rule "
                       FontSize="32"
                       Grid.Column="1"
                       TextWrapping="Wrap"
                       Padding="10,0,0,0"
                       VerticalAlignment="Center"
                       HorizontalAlignment="Left"
                       TextAlignment="Left"></TextBlock>
        </Grid>
    </Grid>

</phone:PhoneApplicationPage>

@Jaihind don't you think there is enough XAML in this post? that words with background color is html inside webbrowser control, not XAML (just saying, if you missed that info) — har07, Mar 07 '14 at 07:13
@har07 No not enough because if web browser has auto height width than it inherit height width of its parent(Grid). which has minHeight '80' and placed at Grid.Row="2" that again child of another grid. that's why i want to know Height of Second row of grid. — Jaihind, Mar 07 '14 at 07:18

Romasz · Answer 1 · 2014-03-16T21:49:54.170

4

To make this work your HTML must end with JavaScript which will inform the WebBrowser about document Size.

The code you have provided lacks this script, so no script is processed and webBrowser1_ScriptNotify is not fired.

Here at CodeProject is shown how it can look like.

EDIT

I've fought with it for a little while and finding Size of rendered Html is not so simple (for me - I'm a complete newbie in JavaScript, so maybe you will have better knowledge).

You can define your <script> in html, then at the end run it or define in body onLoad:

string content = @"Which word in the following sentence is the subject?<I>Paris is beautiful during Spring.</I>Which word in the following sentence is the subject Which word in the following sentence is the subject Which word in the following sentence is the subject";

string newHtmlString = @"<head></head><body bgcolor=#d5e1f3    
      onLoad=""window.external.notify('rendered_height='+document.getElementById('content').offsetHeight);"">
      <div id='content'><p style=font-family:arial><font size=3><center>";

newHtmlString += content + @"</center></p></div></body>";

Then after Navigating the following event should change your WebBrowser.Height:

private void webBrowser1_ScriptNotify(object sender, NotifyEventArgs e)
{
   string[] valuePair = e.Value.Split('=');
   if (valuePair != null && valuePair[0] == "rendered_height")
      webBrowser1.Height = double.Parse(valuePair[1]);
}

edited Mar 16 '14 at 21:49

answered Mar 07 '14 at 07:15

Romasz

29,662
13
79
154

yes i have seen that, but how to apply that to my html string ?can you please help me out ? – Goofy Mar 07 '14 at 07:17
OK, no problem i will wait – Goofy Mar 07 '14 at 07:20
@Goofy It should go like this. Unfortunately I'm not good at JavaScript and finding size of html element may take me a lot of time. Hopefuly this example will help you, and maybe more suitable it will be to ask a question about finding html rendered size with javascript - when you find it, above code will work just fine. – Romasz Mar 07 '14 at 09:45
Thanks i will check once – Goofy Mar 07 '14 at 09:49
`var h = document.getElementById('content').clientHeight;` from here: [Link](http://stackoverflow.com/questions/526347/css-javascript-how-do-you-get-the-rendered-height-of-an-element) – safetyOtter Mar 15 '14 at 05:57
@safetyOtter Thank you. As I was writing the answer I've tried many solutions (offsetHeight, clientHeight, scrollHeight of document, element, body). None of them worked (for me ;) as I would have expected it. The problem, I think, may be with wrapped text, but I'm not good at javaScript. – Romasz Mar 16 '14 at 08:16

Igor Kulman · Answer 2 · 2014-03-15T22:16:58.810

0

Have you found this http://dan.clarke.name/2011/05/resizing-wp7-webbrowser-height-to-fit-content/? Works for me.

Make sure IsScriptEnabled is set to true, subscribe to the ScriptNotify event

protected void WebBrowser_ScriptNotify(object sender, NotifyEventArgs e)
{
    Debug.WriteLine("called");
    WebBrowser thisBrowser = (WebBrowser)sender;
    int height = Convert.ToInt32(e.Value);
    double newHeight = height * 1.5;

    thisBrowser.Height = newHeight;
    Debug.WriteLine(newHeight.ToString());
}

and put his at the end of your html body (the articles does it a bit differently, works for me at the end of the body)

<script type="text/javascript">
    var elem = document.getElementById('content');
    window.external.Notify(elem.scrollHeight + '');    
</script>

And make sure you have a div id="content and that the debug messages get writtent to the output.

edited Mar 15 '14 at 22:16

answered Mar 15 '14 at 10:01

Igor Kulman

16,211
10
57
118

Where do i need to add the script which he has given there ? how can i modify my current content, which i have mentioned above, can you please show mw how ? – Goofy Mar 15 '14 at 10:29
I tried it but still the text is cutting, below i have pasted my tried example with your soultion, please have a look at it – Goofy Mar 15 '14 at 10:40
"+ ""+ "" + "
"+ "
" + "" + Text + " – Goofy Mar 15 '14 at 10:43
Rather than just providing a link, [it would be preferable](http://meta.stackexchange.com/a/8259) to include the essential parts of the answer here, and just provide the link for additional reference. If you're not up to this task, you should consider simply [leaving a comment](http://stackoverflow.com/privileges/comment) on the question instead of posting an answer. – Bernhard Barker Mar 15 '14 at 22:12

score 0 · Answer 3 · answered Jun 04 '14 at 07:50

0

Try to use this script

<script type="text/javascript">
window.onload = function () {
    var elem = document.getElementById('content');
    window.external.Notify(elem.scrollHeight + '');
}
</script>

answered Jun 04 '14 at 07:50

R.Titov

3,115
31
35

Ouadie · Answer 4 · 2015-12-08T16:16:53.857

0

To get the height from the webview, you can use

window.external.notify("rendered_height=document.getElementById('yourId').offsetHeight")

in body.onload and body.onresize

Here is a complete example of an AdaptativeWebview that handle scroll and resize

edited Dec 08 '15 at 16:16

answered Dec 08 '15 at 14:59

Ouadie

13,005
4
52
62

This may theoretically answer the question, but it would be best to include the essential parts of the answer here for future users, and provide the link for reference. [Link-dominated answers](//meta.stackexchange.com/questions/8231) can become invalid through [link rot](//en.wikipedia.org/wiki/Link_rot). – Mogsdad Dec 08 '15 at 16:14

Resizing WP8 WebBrowser Height to Fit Content

4 Answers4