Silverlight display problem

Question

I have created a nice silverlight control doing exactly what I want it to do, and it looks great :) When I host it in the test projects ASPX sample file or the HTML sample file it shows up nicely.

I now have to use the control in my existing ASP.NET 2.0 project, which has a fancy design. The problem I'm having is that the control don't show up exactly how it should:

The loading progress don't show
The control usually don't become visible before I move my mouse over the aria where it's contained

Obviously it's something with my HTML/CSS design causing this, but it will be extremely time consuming to find the issue - so does anyone have knowledge in this area? What are the rules around how to make sure the control is displayed properly? What CSS properties should be used?

PS: Since I have a 2.0 app, I'm using the object tag approach to Silverlight, and it's contained in a DIV with height and width set in style.

Code snippet was requested. It's something like this (basically a copy of the HTML test page from the silverlight test project (which work perfectly)):

<div id="silverlightControlHost" style="height: 300px; width: 750px;">
    <object data="data:application/x-silverlight," type="application/x-silverlight-2-b2"
    width="100%" height="100%">
    <param name="source" value="Contiki.SilverLight.FileUploader.xap" />
    <param name="onerror" value="onSilverlightError" />
    <param name="background" value="white" />                            
    <a href="http://go.microsoft.com/fwlink/?LinkID=115261" style="text-decoration: none;">
        <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight"
        style="border-style: none" />
    </a>
    </object>
    <iframe style='visibility: hidden; height: 0; width: 0; border: 0px'></iframe>
</div>

This DIV is contained in a cell in a table, which again is part of a larger design. There's a lot of CSS as mentioned. Don't know if this helps...

Torbjørn Torbjørn · Accepted Answer · 2008-10-22T13:10:41

Found the cause myself...

It turns out Silverlight has a display problem when the control is placed in a html table. Found information about this on the silverlight forum. It was about the beta 2, but I have upgraded to the release version, and it's still a problem.

Try this. Add a height and a width to the table containing the Silverlight control. You may also want to add a single character of white space inside the TD containing the control.

Basically when the table was rendered it couldn't 'see' the size of the contents so it either didn't render at all or only rendered to the size of a single white-space character.

-- John Stockton

My design is quite complex with nested tables, so I haven't actually been able to make it work yet.

UPDATE:

The actual fix I ended up implementing was a small JavaScript that "refreshes" the containing <DIV>. Here it is:

<script type="text/javascript">
    function refreshSL()
    {
        var div = document.getElementById('silverlightControlHost');
        div.style.display = 'block';
    }
    refreshSL();
</script>

I placed this in my HTML below the actual SL markup, and then it worked (I guess calling it on the page loaded event would be the proper thing to do.

Silverlight display problem

4 Answers