Open Bug 266229 Opened 20 years ago Updated 2 years ago

When using a input of type=file there is hardly any space between input text and the browse button

Categories

(Core :: Layout: Form Controls, enhancement)

Product:
Core
Component:
Layout: Form Controls
Type:
enhancement

Tracking

()

People

(Reporter: vijaymagic, Unassigned)

References

Details

(Keywords: helpwanted) 

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7) Gecko/20040803 Firefox/0.9.3
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7) Gecko/20040803 Firefox/0.9.3

Here is a simple test case
<HTML>
<HEAD>
<TITLE> Fields getting almost overlayed </TITLE>

<title>Check file browse</title>
</HEAD>

<BODY>
<input id="M__Ida" type="file"name="logoFile">
</BODY>
</HTML>

View this file and it can be seen that the input text and the browse button are
very close and hardly there is any pixel space.

Reproducible: Always
Steps to Reproduce:
1. View the file
2.
3.

Actual Results:  
There is hardly any pixel spacing between the input field and the browse button

Expected Results:  
Expect atleast 5 pixel space between the input filed and the browse button.
Severity: minor → normal
> Expect atleast 5 pixel space between the input filed and the browse button.

Why, exactly?

We can probably do this, but is it desirable?
Being part of oracle all our UI's stick to particular Look and feel specification.
All our buttons are images which are generated and are different in shape. There
is a definite spacing between fields and buttons as per the standard, which
gives a good look and feel. Though five pixel is not a oracle standard, having 
worked with both thick and think client applications from my experience 5 pixel
is a standard spacing and this will do good to make the look and feel better. 
It would have helped if we could have customised the button itself to be an image.
The text on the image is also not internationalizable.
The upload option with a square button is a violation, with which we have to
live for a long time.

Look at a consistant page havingg an upload component makes it look very bad.
In my opinion and many users opinion it is very desirable.

Having provided a frame work, we have had lot of queries on this.
Well, the basic question is "what does IE do?"  Doing anything too different is
likely to break pages, unfortunately.
1. IE Provides 5 Pixel Spacing between the input field and the button
2. Like Mozialla, in IE also the button is a rectangular one
2. Text on it is not internationalizable.
If someone does some comprehensive testing of standards/quirks mode in IE and
Opera, this may be ok to do...  The change is pretty simple -- just put a 5px
right margin on the text input.
Keywords: helpwanted
Though this may not be the right place to ask for - I am not sure where to ask
for  - Sorry to annoy you guys.
Can i know in which version will this change be available, so that i can track
and  pass this information to the teams who have been asking on this fix.

If this gets changed, I'll comment on that when the patch is checked in.
Does it mean that this might not be implemented or might not be implemented in
the near future? If that is the case, may i know the reason for holding it?
Both.  What's holding it is the testing I indicated is needed in comment 5.
>>If someone does some comprehensive testing of standards/quirks mode
what does standard/quirks mode testing mean?. Is there any document to explain
the above. Is there a way i can be of any assistance? or is it done internally
by the mozilla development / testing group.
No, anyone can do the testing.  See
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/compatmode.asp
for documentation on IE's rendering modes and
http://www.mozilla.org/docs/web-developer/quirks/ for similar documentation on
Mozilla.  Opera and Safari have similar setups, though I'm not sure where they
are documented.

Basically, the question is how browsers behave in both modes in a variety of
circumstances (different font sizes set via CSS and line breaks happening
between the input and button of a file input are two things that come to mind
right away).
Thanks a lot for the information. Let me take a look at it.
This is an automated message, with ID "auto-resolve01".

This bug has had no comments for a long time. Statistically, we have found that
bug reports that have not been confirmed by a second user after three months are
highly unlikely to be the source of a fix to the code.

While your input is very important to us, our resources are limited and so we
are asking for your help in focussing our efforts. If you can still reproduce
this problem in the latest version of the product (see below for how to obtain a
copy) or, for feature requests, if it's not present in the latest version and
you still believe we should implement it, please visit the URL of this bug
(given at the top of this mail) and add a comment to that effect, giving more
reproduction information if you have it.

If it is not a problem any longer, you need take no action. If this bug is not
changed in any way in the next two weeks, it will be automatically resolved.
Thank you for your help in this matter.

The latest beta releases can be obtained from:
Firefox:     http://www.mozilla.org/projects/firefox/
Thunderbird: http://www.mozilla.org/products/thunderbird/releases/1.5beta1.html
Seamonkey:   http://www.mozilla.org/projects/seamonkey/

I tested this on IE 6, Opera and Mozilla. Both IE 6 and Opera has a 2px distance between the text field and the browse button. Mozilla has 0 px.

The 2px distance in IE and Opera remained no matter what. Tested in quirks mode and standard compliance mode. Also tested increasing the font-size with no change.

I can attach screenshots if necessary.
I have seen that i has not effect on switching to standards more / quirks mode in IE. I don't think any browser switching between different modes is going to do soemthing different for this component. I really doubt. The upload component has been one of the strange component, which we have to default to the browsers LAF. Over and above it sticks out without proper UI alignments. The first thing would be to add 5px spacing between the textfield and the button. This makes it look lot better, or to be consistent provide 2px as other browsers do.
There's no spec for how this should look, but ours does look crowded compared to Opera and IE.
Severity: normal → enhancement
Status: UNCONFIRMED → NEW
Ever confirmed: true
I can confirm comment 14 (2px margin) with Opera9.6, IE7 and IE8RC1
Component: Layout → Layout: Form Controls
OS: Windows 2000 → All
QA Contact: layout → layout.form-controls
Hardware: x86 → All
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.