Closed Bug 222859 Opened 21 years ago Closed 21 years ago

width of input element if type is "file"

Categories

(Core :: Layout: Form Controls, defect)

Product:
Core
Component:
Layout: Form Controls
Platform:
x86
Windows 98
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED DUPLICATE of bug 52500

People

(Reporter: ve3ll, Unassigned)

Details

User-Agent:       Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.6a) Gecko/20031019
Build Identifier: Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.6a) Gecko/20031019

simple example shows button positioning problem
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
input {width:400px;background:skyblue}
</style></head>
<body><input name="x" type="file"></body></html>

more complex example shows how control doesnt respond to
 width setting of 'box' class
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>File Browser Component Test</title>
<style type="text/css">
body {color:black; background:linen;
      margin:40px; margin-top:0px; border:0px; padding:0px; font-size:12pt}
div {margin:0px; border:solid 0px gray; padding:0px}
div.c {text-align:center; margin:auto; border:0px}

/* default list and table structure specs */
table {margin:auto; border:solid 0px gray; padding:0px}
tr {vertical-align:top}
td {margin-left:auto; margin-right:auto; padding:1px 3px;
    border:solid 0px gray; text-align:left; vertical-align:top}
th {margin-left:auto; margin-right:auto; padding:1px 3px;
    border:solid 0px gray; text-align:center; vertical-align:top}

/* default forms structure specifications */
form {margin:auto; padding:10px; text-align:center}
input {width:140px; background:white; padding-left:2px}
textarea {background:white}
fieldset {border:black 1pt solid; padding:2px}
legend {background:thistle; border: black 1pt solid;
        padding-left: 1em; padding-right: 1em}

/* special forms configurations */
form.fancy {background:skyblue; width:640px; border:5px solid skyblue}
input.box {width:180px}
input.radio {width:20px; background:transparent}
input.go100 {background:silver}
legend.silver {background:silver}
</style></head>
<body><h2>File Browser Component Test</h2>
<p>The project for this tutorial is to duplicate the look and feel of the
following html form. It will become the GUI for a very useful utility
that prepares a database for a site search engine as used by the author.</p>
<div class="c"><form class="fancy" name="utility" action="?" method="post">
<fieldset><legend>KeyWord Extraction Utility</legend>
<table summary="*"><tr>
<td><fieldset><legend class="silver">Input Settings</legend>
	<input class="radio" name="d" type="checkbox" />Use description metatag<br />
    <input class="radio" name="k" type="checkbox" />Use keyword metatag<br />
    <input class="radio" name="b" type="checkbox" />Body using first
    <select name="num" size="1">
    <option>25</option>
    <option>50</option>
    <option>75</option>
    <option>99</option></select> words<br />
    Local Folder:<br />
    <input class="box" name="f" type="file" /></fieldset></td>
<td><fieldset><legend class="silver">Output Settings</legend>
    Site URL:&nbsp; <input name="u" type="text" /><br />
    Report style: <select name="s" size="1">
    <option>Tipue Search</option>
    <option>Tab Delimited</option>
    <option>Comma Delimited&nbsp;</option></select><br />
    Report file:<br />
    <input class="box" name="f" type="file" /></fieldset></td>
<td><fieldset><legend class="silver">RunTime</legend>
    <input class="go100" name="r" type="button" value="Run The Utility" /><br />
    <input class="go100" name="x" type="button" value="Exit After Save" /><br />
    <input class="go100" name="h" type="button" value="Helpful Hints" /><br />
    <input class="go100" name="a" type="button" value="About..." />
    </fieldset></td>
</tr></table></fieldset></form></div>

<hr id="bot" />
<a href="home.htm">JR's Home Page</a> | <a href="#top">Top of Page</a> |
<a href="mailto:VE3LL@RAC.CA?Subject=[jatutor7.htm]">Comments</a> |
[jatutor7.htm:2003 10 15]</body></html>


Reproducible: Always

Steps to Reproduce:
1. run either test case
2. observe results ...
3. check with other major browsers

Actual Results:  
major positioning and sizing issues

Expected Results:  
act similarly to other browsers by 
positioning browse button to right 
and allowing control of width thru style...
This is already on the most-frequently reported/duplicated bugs list.

*** This bug has been marked as a duplicate of 52500 ***
Status: UNCONFIRMED → RESOLVED
Closed: 21 years ago
Resolution: --- → DUPLICATE
You need to log in before you can comment on or make changes to this bug.