Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Browser scrollbars problem with silverlight application.(Html)

I have a simple silverlight application and i need to add the web browser scroll bars for it. (scroll bars not inside my silverlight app)

So I have html:

<style type="text/css">
html, body {
    height: 100%;
    overflow: auto;
}
body {
    padding: 0;
    margin: 0;
}
#silverlightControlHost {
    height: 100%;
    min-height:600px;
    min-width:800px;
    text-align:center;
}
</style><body>
<form id="form1" runat="server" style="height:100%">
<div id="silverlightControlHost">
    <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">       
      <param name="source" value="ClientBin/Infopulse.MobileOptimizer.xap"/>          
      <param name="onError" value="onSilverlightError" />
      <param name="background" value="white" />
      <param name="minRuntimeVersion" value="4.0.50401.0" />
      <param name="autoUpgrade" value="true" />       
      <param name="culture" value="ru-ru" />
      <param name="uiculture" value="ru-ru" />
      <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" 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>
</body>

And i faced with next problem: vertical scroll bar works not properly when scroll bar is enabled silverlight application not fits content of page. (Red arrow on screen shows the area without silverlight application) I dont now how to solve this problem. Width fits normally. Inside silverlight application content set to stretch

Image: Problem with scroll bars

I will be grateful for any information

enter image description here

like image 971
Ievgen Avatar asked Jan 29 '11 11:01

Ievgen


2 Answers

We had the same problem in IE and Chrome and solved it using Javascript:

  1. Add the following Javascript to your Silverlight test page.

    window.onload = resizeObject;
    window.onresize = resizeObject;
    function resizeObject() {
        var height = document.getElementById('silverlightControlHost').offsetHeight;
        document.getElementById('silverlightObject').height = height;
    }
    
  2. Give your OBJECT tag the ID 'silverlightObject'.

    <object id="silverlightObject" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
    </object>
    
  3. Test it.

like image 89
greg Avatar answered Nov 15 '22 12:11

greg


Have you tried putting a overflow:auto; in div #silverlightControlHost style? and remove the property from html,body

like image 38
Damien Pirsy Avatar answered Nov 15 '22 10:11

Damien Pirsy