Silverlight content is being displayed on top of HTML content

Question

I have an HTML table on a page that embeds a tiny Silverlight app to provide cross-browser "Copy to Clipboard" functionality. The entire "app" is a single button that copies a value to the clipboard from the row in which it is embedded. I am also using the jQueryUI Dialog widget for other areas of the page. When the dialog opens it is displayed on top of all other content on the page except those Silverlight buttons. For some reason I cannot get the modal dialog to sit on top of those buttons and it's obviously a big usability issue.

I've done quite a bit of research and have yet to find a solution that works. I'm sure this problem stems from my lack of in-depth understanding of Silverlight's relationship to the DOM and how it affects layout and and styling.

I've tried several things, including setting the "windowless" property to true and the background to "transparent", I've also played around with some styling workaround I found on blogs. Unfortunately nothing has worked.

Here's the code used to instantiate the Silverlight plugin for each row.

Silverlight.createObjectEx({
    "source": src,
    "parentElement": cell,
    "id": String.format("pluginHost_{0}", id),
    "properties": {
        "height": "16",
        "width": "16",
        "background": "transparent",
        "windowless": true,
        "enableHtmlAccess": true,
        "version": "4.0.50826.0"
    },
    "events": {
        "onLoad": null,
        "onError": null
    },
    "initParams": String.format("url={0}", item.Url),
    "context": null
});

As I said before, it's just a small (16px) button that takes a URL from its associated data row as an initialization parameter and copies that to the clipboard whenever the button is pressed. Because data is loaded dynamically via an external web service, I am loading the plugin using the Silverlight.js library so that I can pass in data as the plugin is initialized on each row.

Can anyone tell me why the buttons in my table display on top of the modal dialog (and any other element I move on top of the table)?

Here's a screenshot of what I'm seeing.

Thanks!

Answer 1

I faced a similar problem where I was trying to display a gif progress image over a silverlight container. For this I had a pre-written javascript. It did not work as expected because silverlight always used to come on the top of other elements in the webpage.

I tried the following which worked for me:

add the following where you are creating silverlight object in your webpage:

<param name="windowless" value="true" />

Example:

<div id="silverlightControlHost">
  <object id="SilverlightObject" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="800" height="500" style="z-index:1" >
    <param name="source" value="ClientBin/GIF2.xap"/>
    <param name="onError" value="onSilverlightError" />
    <param name="windowless" value="true" />
    <param name="background" value="white" />
    <param name="minRuntimeVersion" value="4.0.50826.0" />
    <param name="autoUpgrade" value="true" />
    <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
      <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
    </a>
  </object>
</div>

I also had to use the z-index property in addition to the above parameter.

To show one above another, I simply change their z-index using javascript, as required.

Example:

var divelement = document.getElementById("element_to_be_on_top");
divelement.style.zIndex = 999;

Reference: http://weblogs.asp.net/dwahlin/archive/2010/05/10/integrating-html-into-silverlight-applications.aspx