Silverlight Plug-in and the Height Percentage problem in Firefox
Posted by Guardian in Silverlight Tips on Thursday 06 November 2008 at 2:59 PM
Today I added a small Silverlight application to an existing and styled website, the app was surrounded by the usual <div>:
1: <div style="height: 100%">
2: <asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/XXX.xap"
3: MinimumVersion="2.0.31005.0" Width="100%" Height="100%" />
4: </div>
In IE7 all gone well but in FF the Silverlight application appeared to be completely collapsed and not visible at all. After some research I found that the problem is in the way Firefox renders the <object> tag when its height is relative (that is it’s a percentage). Since none of the containers around the Silverlight <object> tag had a Height defined Firefox assumed to use 0.
You have 3 possible workarounds to this problem:
- You can set a Fixed Height for the Silverlight application (not always a good solution)
- You can set the Height of all the main containers of the page to 100%, that is: <html>, <body> and <form> tags if you use ASP.NET, with something like this:
1: <style type="text/css">
2: html, body, form3: {4: height: 100%;5: }6: </style>
- You can use the following style for the <div> that wraps the Silverlight plug-in:
1: <div style="position: fixed; height: 100%; width: 100%">
2: ...silverlight app...3: </div>
Choose the solution that fit best with your current styling mode.
-
-
License
Except were otherwise noted the articles, libraries, code snippets and any work presented in this blog by Giorgetti Alessandro is licensed under a Creative Commons Attribuzione 3.0 Unported License.
#1 da Silverlight Plug-in and the Height Percentage problem in Firefox - Saturday March 2010 alle 01:15
[...] Today I added a small Silverlight application to an existing and styled website, the app was surrounded by the usual : 1: 2: More [...]
#2 da Silverlight Plug-in and the Height Percentage problem in Firefox - Saturday March 2010 alle 01:15
[...] Today I added a small Silverlight application to an existing and styled website, the app was surrounded by the usual : 1: 2: More [...]
#3 da Philip - Saturday March 2010 alle 01:15
Thanks so much for this post! One note: Option 3 upsets Google Chrome (and Safari I assume) so Option 2 is the safe bet. Also with Google Chrome: use the object style tag to set width and height as well as setting the height and width properties. And it seems that Chrome also takes into account the html tags within the Object tag as well.
#4 da Kasimin Husaini - Saturday March 2010 alle 01:15
How can I set minimum height of the silverlight plugin while keeping maximum height to be based on screen height and browser window size.
#5 da Firefox and the 100% DIV revisited - Peters Gekko - Saturday March 2010 alle 01:15
[...] are several work around's. A post by Giorgetti Alessandro summarizes all of them. I did some further investigations and found limitations and gotcha's on all three of [...]
#6 da Bart Van den Poel - Saturday March 2010 alle 01:15
Thanks! Just spend an hour searching for the cause of this...
#7 da Jon - Saturday March 2010 alle 01:15
The % tag doesn't work at all or in other FF browser, if you really want to make sure that it is working in FF, do try the point width system instead e.g. 1024px by 768px of W x H.
#8 da Heartburn Home Remedy - Saturday March 2010 alle 01:15
My friend on Orkut shared this link with me and I'm not dissapointed at all that I came here.
#9 da automotive floor jack - Saturday March 2010 alle 01:15
It's the first time I commented here and I should say that you share us genuine, and quality information for other bloggers! Great job. p.s. You have an awesome template for your blog. Where have you got it from?
#10 da get tall - Saturday March 2010 alle 01:15
Really remarkable post to hang on.. I am very amazed with this article. Looking forward for more info.
#11 da Rich - Saturday March 2010 alle 01:15
This : 1: 2: ...silverlight app... 3: Was awesome! Many thanks.
#12 da nokAnnessyZen - Saturday March 2010 alle 01:15
you have a wonderful site!
#13 da Johnson - Thursday February 2011 alle 06:32
Option 3 worked for me. I tested in FireFox, IE 8 and Chrome.