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

RESOLVED FIXED

Status

()

Core
Layout: Form Controls
RESOLVED FIXED
12 years ago
12 years ago

People

(Reporter: Thomas Pundt, Unassigned)

Tracking

Trunk
x86
Linux
Points:
---
Bug Flags:
in-testsuite ?

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

12 years ago
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

Comment 2

12 years ago
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>

Comment 3

12 years ago
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
Last Resolved: 12 years ago
Depends on: 300030
Flags: in-testsuite?
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.