FireFox and Upload Input Width Work Around

Hi,
  I've found a work around for the following problem:

RadUpload is unable to set the width of the file select boxes in Mozilla/Firefox due to a browser bug. More information is available in Modifying File Input Appearance.

An easy way to fix this is in the CSS.  Following are the two styles used for the input (taken from the Default skin)

I've modified it as follows to get a width that is greater than the usual 140px


I'm aiming for a width of 440px. Now note the "width" on the RadUploadInputField style. It's 370px which is 440px - select button width.  Also note the width on the input.RealFileInput style. It's at 440px, the width I'm aiming for.  Also note the text-align:right this does the final fix.  You'll also have to increase the width in the RadUploadTable style to compensate for the new upload input width.

So to get it working all you need do is the following:

1. Set the width in the RadUploadInputField style to:
   YourDesiredWidth - SelectButtonWidth
2. Set the width on the input.RealFileInput to YourDesiredWidth
3. Add the text-align:right attribute to the input.RealFileInput style
4. Increase the width in the RadUploadTable style to compensate for your new upload input width.

Cheers,

Michael

Nifty. Thanx for posting this.

I had to make one minor change to get it to work in IE. The "_width: 440px;" had to be removed from the RadUploadInputField style.

The problem is, that in firefox (3.0.5) the file input is not 100% in width, but as you can see, the text input works as expected. However, the same code works in both IE7 and Opera 9.6x. Does anyone know how to work around this problem? Is it in any way possible to have the file input as wide as the text input (in firefox)?
It would even be ok to hard code a value for the width, but not even this works. If a give the file input a width of, say 300px, firefox does not give the whole element 300px space, but rather the input field of the file upload only, without the button. So if I hard code the width, it works for me, but on another machine with firefox in another language, the button has another width, so I'm screwed once again.
---------------------------------------------------------
rene

New Jobs

Hi Rene,
  I haven't reviewed this yet (it's been a number of years since that post) but the project that uses this fix is up for maintenance so I will be reviewing it in the coming weeks.  If I have a resolution I'll post it here.

Sorry can't be much more help.
Cheers,

Michael