Forum Moderators: open

Message Too Old, No Replies

Width of file input in Firefox

How can I get 100% width for the file input in Firefox?

         

pinhead

6:32 pm on Jan 8, 2009 (gmt 0)

10+ Year Member



I've got the following testcase:
<div style="width:400px;margin:0 auto;border:1px solid black;padding:10px;">
<form>
<input name="name" type="file" style="width:100%;" />
<input name="name" type="text" style="width:100%;" />
</form>
</div>

The doctype is HTML 4.01 Transitional (full version), but I actually don't care, if it works with another doctype, that's fine with me (but it doesn't, at least not the ways I tried).

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.

Is it really possible that it is not possible to make Firefox understand that?!

tedster

2:19 am on Jan 9, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The file input type is notorious for being a major styling challenge - in many browsers. If you search for phrases like [firefox file input width bug] you'll find many clever but complicated work-arounds, usually using Javascript and the DOM.

You can choose any one of those kludges that suits you, but as you'll see, there's nothing very simple and direct. One example is [quirksmode.org...]

If you work with the size attribute for both input elements, you can sometimes come up with acceptable results - but they're not as good as true CSS support for the element "should" give.

dreamcatcher

3:08 pm on Jan 22, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



This has been an issue since FF3. I believe it has been filed as a bug.

dc