I am facing a challenge with my Silverlight Application (VS2010/C#) that runs in full screen mode.
There is also an HTML control positioned over the Silverlight Application.
When I maximize the browser window, everything looks fine. However, when I resize the window to a smaller dimension, scrollbars appear for the Silverlight application as expected. But when I scroll down, the HTML content does not move and remains fixed relative to its position within the window. I want the HTML to scroll along with the Silverlight application. Is there a way to achieve this?
Due to business flow reasons, it is not feasible to place the HTML content inside the Silverlight application.
Below are the style sheets being used:
<style type="text/css">
html, body
{
height: 100%;
overflow: auto;
}
body
{
padding: 0;
margin: 0;
}
#silverlightControlHost
{
height: 100%;
text-align: center;
position: absolute;
width: 100%;
left: 0px;
top: 0px;
}
#contentDiv
{
position: absolute;
top: 15px;
right: 30px;
display: inline;
z-index: 20000;
}
</style>
And here is the HTML code:
<form id="form1" runat="server" style="height:100%">
<div runat="server" id="contentDiv">
--HTML CONTROLS
</div>
<div id="silverlightControlHost">
<object id="silverlightControl" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="windowless" value="true"/>
<param name="enablehtmlaccess" value="true" />
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.50826.0" />
<param name="autoUpgrade" value="true" />
<a href="http://www.microsoft.com/GETSILVERLIGHT" style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
</a>
</object>
<iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>
</div>
</form>
Any assistance on resolving this issue would be greatly appreciated.
It seems that the scroll bars belong to the Silverlight instance based on confirmation. To test this theory, I positioned the HTML controls at the bottom right corner by setting large values for "LEFT" and "TOP" properties in the CSS.
Upon resizing, both the browser and the Silverlight app displayed scroll bars but of different styles.
After reverting back and reproducing the initial problem, the scrollbars observed had the same style as the Silverlight App, indicating that all scrolling was confined to the Silverlight App itself.
Moving forward, one potential solution could be integrating the HTML content within the Silverlight application, even though it may disrupt the existing business flow. Any alternative approaches or suggestions to resolve this issue would be highly valuable.