<< 'Open sauce' talk | OpenID implementation in C# and ASP.NET >>

Firefox and the FileUpload control in ASP.NET

by Mads Kristensen 18. January 2008 04:54

I’ve been pretty annoyed about the fact that FireFox ignores the width property of the ASP.NET FileUpload control. It doesn’t matter if you set it by CSS or even in JavaScript, Firefox always ignores it and that results in a crippled layout since you have no control over the width of the upload input field. This actually has nothing to do with the FileUpload control, but with the rendered output of that control, which is just a standard <input type="file"...> field.

Here the width is set to 400px. The FileUpload control renders the Width attribute to the correct CSS style value of 400px at runtime.

<asp:FileUpload runat="server" ID="txtUpload" Width="400" />

But as mentioned, Firefox totally ignores that. Then I remembered a forum thread I read some years ago about a size attribute. The only thing I could find was this list of available HTML attributes, but I gave it a try.

This is what I ended up with. The size attribute actually works in Firefox and IE ignores it, but adheres to the Width attribute instead.

<asp:FileUpload runat="server" ID="txtUpload" Width="400" size="50" />

The size attribute determines the number of characters should be visible and then adjusts the width accordingly. It is not the same as setting a maximum length of the file name, so it doesn’t break anything.

You should think that since a size of 50 generates the same width as 400px that you could always just divide the width in pixels with 8 to find the equivalent size. That is not the case. You have to manually adjust every time until you find the right size value that matches the pixel width.

Don’t you just love these kinds of obscure browser differences?

* Only $4.95/month ASP.NET & Windows 2008 + IIS 7 Hosting! FREE SQL Included

91981ebb-bbf8-479d-bea0-11b8b1fe28b8|14|4.3

Tags: internet explorer

ASP.NET | Client-side

Create reusable user controls in ASP.NET In almost every web project of any size, you would probably use a lot of user controls to s...Parse controls dynamically in ASP.NET Most of the primitive types in the CLR have a Parse method that takes a string and parses i...Load user controls from an HttpHandler in ASP.NETA way to load a user control from an HttpHandler (.ashx) using reflection

Comments

1/18/2008 5:41:16 AM #

Thanks Mads, really useful tip.

Miron |

1/18/2008 8:21:38 AM #

Mads,
Not sure if this helps - haven't tried, but instead of just Width="400" try to put in Width="400px". I remember I had to do something similar, not for FileUpload though, to make it recognise the size in FireFox.

HTH

Filip |

1/18/2008 9:06:33 AM #

Thanks Mads, I just added a FileUpload control about two hours ago but didn't spend any time getting it formatted yet, this will save me some looking around time.

Cameron |

1/18/2008 1:31:48 PM #

Why not use css to determine the width?
#txtUpload { width;400px; }

David |

1/18/2008 3:38:34 PM #

@Filip and @David,

When you set the Width="400" on the FileUpload or any other web control in ASP.NET 2.0, it will render as style="width:400px". This means that it uses standard CSS to set the width and that is still ignored by Firefox.

Mads Kristensen |

1/18/2008 7:43:29 PM #

There is a post on Quirksmode which explain how to style an input type="file" : http://www.quirksmode.org/dom/inputfile.html

Michel |

1/18/2008 9:51:58 PM #

Yes, I hate these kind of differences, but I would not blame Firefox for this. IE is the problem for not recognizing the size attribute. File input controls have legendarily been difficult (nearly impossible) to style, and it comes as no surprise to me that Firefox ignores most CSS attributes. ASP.NET really should render the FileUpload control to something that would work in both browsers (both the size attribute and the accompanying CSS). Have a look at what the W3C has to say about the size attribute of input elements...

www.w3.org/TR/html4/interact/forms.html#h-17.4

In a perfect world, ASP.NET would properly interpret the Width value and convert it to Size, and IE would recognize it.

Josh Stodola |

1/19/2008 6:59:06 AM #

I found that if you adjust for Firefox the page does'nt load well in IE or vice versa. Then you have to consider they are not the only browser. What a mess. But I experimented and came up with a code that works in all browsers I am aware of.
<table border=0 cellpadding=2 cellspacing=0 width="100%" height="100%"> You may have to use it to start every table on a page but it works.
If anybody has a problem or has something better, let me know.

Jeff |

1/24/2008 7:01:19 AM #