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…
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.
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:
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.