Closed Bug 353140 Opened 18 years ago Closed 18 years ago

input field's value doesn't display in certain positioned environments.

Categories

(Core :: Layout: Form Controls, defect)

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

Tracking

()

Status:
RESOLVED FIXED

People

(Reporter: thomas, Unassigned)

References

Details

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; de; rv:1.8.0.7) Gecko/20060911 SUSE/1.5.0.7-0.1 Firefox/1.5.0.7
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; de; rv:1.8.0.7) Gecko/20060911 SUSE/1.5.0.7-0.1 Firefox/1.5.0.7

In the following example the input field's value "display this" won't be
displayed in Firefox. If I leave out "float:left", it will be displayed.

<html><head></head><body>
<form>
<div style="float:left;position:relative">  
<div style="position:absolute;left:0;top:0">
<input type="text" value="display this" />
</div>
</div> 
</form></body></html>


Reproducible: Always

Steps to Reproduce:
1.Copy example from "Details" into a file
2.Open that file in browser

Actual Results:  
value in input box is not displayed

Expected Results:  
value in input box should be displayed

I've tested Firefox 1.5.0.7/Linux, 1.5.0.4/Windows 2000, Nightly Build/Windows 2000, and all show up the same behaviour.
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9a1) Gecko/20060917 Minefield/3.0a1
The testcase fails in the builds you mentioned indeed, but it appears to work in reflow branch builds:
http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/experimental/reflow-refactor/latest-trunk/
http://wiki.mozilla.org/Gecko:Reflow_Refactoring
Component: General → Layout: Form Controls
Product: Firefox → Core
QA Contact: general → layout.form-controls
Version: unspecified → Trunk
I noticed this behavior, too.

OS: Windows XP Pro (SP 2)
Product: Firefox 1.5 and still 2.0

The div clips the content of the "input type=text" element.

Example:

<html>
  <body>
    <div style="position:absolute;border:1px solid red;width:120px;height:40px;">
      <div style="position:absolute;top:10px;left:50px;">
        <input type="text" name="inputFieldName" value="inputFieldContent" style="width:150px;">
      </div>
    </div>
  </body>
</html>
I've noticed this bug too in a diferent situation, but only part of the text is visible in the editable area of the INPUT. You can click on that text and even scroll through the entire string of text using the keyboard or dragging the mouse. I've found the fix to be the same: Give the positioned DIV a width. Link to the test page I created is below:

http://help.newdigitalgroup.com/bugs/Firefox/textarea_and_input_overlap/
Fixed by reflow branch landing.
Status: UNCONFIRMED → RESOLVED
Closed: 18 years ago
Depends on: reflow-refactor
Flags: in-testsuite?
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.