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?

Published Tuesday, October 16, 2007 8:58 PM by Palermo4

Comments

# re: Silverlight Plugin Unable to do Height Percentage in Firefox

Tuesday, October 16, 2007 9:41 PM by Joe Chung

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).

# re: Silverlight Plugin Unable to do Height Percentage in Firefox

Tuesday, October 16, 2007 9:44 PM by Will Green

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.

# re: Silverlight Plugin Unable to do Height Percentage in Firefox

Tuesday, October 16, 2007 11:09 PM by Palermo4

Joe Chung,

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

# re: Silverlight Plugin Unable to do Height Percentage in Firefox

Tuesday, October 16, 2007 11:11 PM by Palermo4

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";

}

# re: Silverlight Plugin Unable to do Height Percentage in Firefox

Wednesday, October 17, 2007 12:10 AM by Joe Chung

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.

# re: Silverlight Plugin Unable to do Height Percentage in Firefox

Wednesday, October 17, 2007 12:16 AM by Joe Chung

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

# re: Silverlight Plugin Unable to do Height Percentage in Firefox

Wednesday, October 17, 2007 2:41 AM by Pete Blois

Firefox doesn't stretch to fill the height by default, to make it do that use:

<style type="text/css">

html, body {

height: 100%;

}

</style>

# re: Silverlight Plugin Unable to do Height Percentage in Firefox

Wednesday, October 17, 2007 8:40 AM by Palermo4

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.

# re: Silverlight Plugin Unable to do Height Percentage in Firefox

Thursday, August 7, 2008 10:07 PM by windchaser

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

Daniel

# re: Silverlight Plugin Unable to do Height Percentage in Firefox

Friday, October 10, 2008 9:20 AM by Will

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

may have ie6 issues though.

# re: Silverlight Plugin Unable to do Height Percentage in Firefox

Wednesday, April 22, 2009 5:34 AM by Barbir

Yeeahhooo!

Thanks Will, it work!

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

# re: Silverlight Plugin Unable to do Height Percentage in Firefox

Thursday, September 1, 2011 7:43 PM by Rhys Jones

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.

Leave a Comment

(required) 
(required) 
(optional)
(required)