Silverlight Plugin Unable to do Height Percentage in Firefox

I recently published a video on resizing Silverlight controls.  I just observed an odd behavior in the Firefox browser when setting the height of the plugin to any percentage (10%, 50%, 100%).  I can set the width to 100%, as the screenshot below indicates:

silverlight in firefox browser with width at 100%

Notice the height is set to 100, not 100%.  Now, if I change the height to 100%, this is what happens:

setting height to 100% causes silverlight control to disappear in silverlight

By setting the height to a percentage (of any number) in Firefox, my silverlight control disappears.  If I set the height to a percentage in other browsers - the control behaves as it should.  Anyone know why height percentage does not work in Firefox?

11 Comments

  • This isn't a Silverlight-specific issue. It has to do with the way Firefox handles HTML OBJECT layout. To work around this, set the CSS display attribute for your OBJECT to block (display: block).

  • Thats because the object element's ancestors do not have a height set. In this case, you have an object inside a div, inside a div, inside the body. Nothing I see sets a height, so, therefor, the relative height you have set for the object has nothing to be relative to.

  • Joe Chung,

    Setting the object css display attribute did not work. Thanks for the feedback anyway.

  • Will Green,

    Your advice did put me on track to the solution. I added the following to my javascript to get height percentage to work in Firefox:

    // change element height to window height in firefox
    if (window.innerHeight)
    {
    slHost.style.height = window.innerHeight + "px";
    }

  • Setting the object's CSS display to block works if you don't set the DOCTYPE as shown in your screenshots. If you set the DOCTYPE, it won't work.

  • Scratch my last reply. It appears that the Silverlight script overrides default HTML OBJECT processing, DTD or not.

  • Pete Blois,

    Unfortunately that is not true. Joe Chung made that clear in one of his comments. Silverlight script overrides what would typically work.

    I did find a solution that does work, and it is in a previous comment.

  • any resolution to this issue? I am having the same problems.
    Daniel

  • style="position:fixed;left:0;top:0;height:100%;width:100%"

    may have ie6 issues though.

  • Yeeahhooo!
    Thanks Will, it work!
    style="position:fixed;left:0;top:0;height:100%;width:100%"

  • An even easier option was to add the following style to the SilverlightContainer DIV tag:

    style="position:fixed;"

    The Silverlight object then picks up the height (and width) that is defined in the Silverlight object, whether it is percentage or pixel based.

Comments have been disabled for this content.