Firefox and the FileUpload control in ASP.NET


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

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.

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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: