HTML not fully displaying in HtmlBox

[itg-assistant]

SteveG asked 2017-05-09 09:24:00 UTC

Hi

I have a problem with displaying some HTML on a usercontrol.

Basically what I have is a standard usercontrol with an HtmlBox on it that has been Dock.Fill inside the parent container (the usercontrol) - that is it.

I am feeding in some html via the constructor on the usercontrol and setting the html via the html property on the HtmlBox. The usercontrol height is set at 700 in the designer and resized at runtime to 400

public advertWindowL(string html, string height)
{
InitializeComponent();

if (height != null)
{
this.Height = Convert.ToInt32(height);
htmlPanel1.Height = Convert.ToInt32(height);
}

htmlPanel1.Html = html.Trim();

}

The (test) html is -

Test Title

Hello, World xxx!

You can modify the text in the box to e ft any way you like, and then click the 'Show Page' button below the box to display the result here. Go ahead and do this as often and as long as you like.

The problem is only half the htmlbox will load as you can see in the attachment. The dotted line is the htmlbox1.borderstyle set to dotted so you can see the control boundaries.

If I hit F5 the majority of the time the htmlbox will then load correctly, however, not always. Sometimes it takes 2 or 3 refreshes before it will display properly.

Anyone any clue as to what is going on here ?

Thanks

Steve

[itg-assistant]

Luca answered 2017-05-09 13:47:42 UTC

Hi Steve,

The problem is caused by the image not having a size in the html. If you add  width="480" height="237" to the img tag the size will be correct. The reason is that the HtmlPanel widget is not an IFrame, it's embedded html in the page (in fact the <style> in the html will affect the entire page, not only the html panel), so Wisej tries to measure the content in order to display and adjust the inner scrollable panel. Since the image doesn't have a size and the loading is async, it ends up measuring the wrong height.

I will add an issue and see if we can detect when the loading of the content is complete and resize the panel.

If you want to style only the html in the HtmlPanel without affecting the whole page, you can use the Css property or the StyleSheet source. Any css you place in there will automatically be isolated by Wisej within a parent css rule that affects only the specific panel. Also the embedded html doesn't have a body or html tag, they are stripped before assigning the html.

HTH

/Luca

[itg-assistant]

Steve Gray answered 2017-05-09 14:40:58 UTC

Fantastic!  - that's sorted it.  Explanation makes sense too.

The new HTML

<title>Test Title</title>

Hello, World xxx!

You can modify the text in the box to e ft any way you like, and then click the 'Show Page' button below the box to display the result here. Go ahead and do this as often and as long as you like.

Thanks.

Steve.