No scrollbars in IE7 for overflowing Silverlight control

autoI've been working on a Silverlight 4 application that is embedded within an ASP.NET web application. Said Silverlight control varies in height, and in many cases, flows vertically off the bottom of the screen.

This is no problem for most browsers (particularly IE 8, Chrome, Firefox), as they add a vertical scroll bar to the HTML document. However, IE7 does NOT show these scroll bars, making it impossible to view the entire Silverlight control.

Code snippet of how I have it embedded:

...
<div id="silverlightControlHost">
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
    height="100%"
    width="100%">
    <param name="source" value="MyApp.xap" />
    <param name="onError" value="onSilverlightError" />
    <param name="background" value="white" />
    <param name="minRuntimeVersion" value="4.0.41108.0" />
    <param name="autoUpgrade" value="true" />
</object>
...

Only relevant CSS:

#silverlightControlHost
{
   height: 100%;
   text-align: center;
}

I've tried adding an 'overflow: auto' and margin/padding style properties (which shows a scroll bar but doesn't actually scroll at all?), setti开发者_如何学JAVAng static sizes on the <object>, neither which work. Keep in mind, the height of this control varies even after page load time (the Silverlight control switches between RootVisuals of varying height).

Any guru on IE7 have an idea how to circumvent this issue? Thanks.

Dave,

what seems helpful sometimes is to add the following styles:

<style type="text/css">
html, body {
    height: 100%;
    overflow: auto;
}

body {
    padding: 0;
    margin: 0;
}

#silverlightControlHost {
    height: 100%;
    text-align:center;
}
</style>

the styles for html, body are most important here.

UPDATE

what also might be helpful is resizing the silverlight control host div from inside silverlight. I've found this code example, you could attach this to your resizing event.

Dispatcher.BeginInvoke(() =>
{
    double height = this.RenderSize.Height;
    double width = this.RenderSize.Width;
    //silverlightControlHost is the div which hold silverlight object
    HtmlPage.Document.GetElementById("silverlightControlHost").SetStyleAttribute("width", height.ToString() + "px");
    HtmlPage.Document.GetElementById("silverlightControlHost").SetStyleAttribute("height", width.ToString() + "px");
});

(With regards to Frank Lan of Silverlight Forum)

HTH

I had a similar problem, and I solved it by adding style to html, body - min width and height elements.

like this:

 html, body 
{
    height: 100%;
    overflow: auto;
     min-height:500px; 
     min-width:700px;
}

For me it´s working on Opera 12 and IE 9