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.