Closed Bug 440415 Opened 17 years ago Closed 15 years ago

<input type="text" style="width: 100%"> sticks out of table

Categories

(Core :: Layout, defect)

defect
Not set
normal

Tracking

()

RESOLVED INVALID

People

(Reporter: varlou, Unassigned)

References

(Blocks 1 open bug)

Details

(Keywords: testcase)

Attachments

(1 file)

User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-GB; rv:1.9) Gecko/2008052906 Firefox/3.0 Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-GB; rv:1.9) Gecko/2008052906 Firefox/3.0 The <input style="width: 100%" type="text" ...> is awkwardly rendered (see HTML below). The text field is rendered longer than parent table and the right side goes outside enclosing table (around 7px). The problem doesn't occur when there is no <!DOCTYPE html ....> (see the line #1) in HTML code. ..................................... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <body style="width: 50%;"> <table border=1 width="100%"> <tr><td> <input style="width: 100%" type="text" maxlength="40"> </td></tr> <body> </html> ..................................... Reproducible: Always Steps to Reproduce: 1. go to http://www.arlou.com/bug.htm Actual Results: Broken table with edit field sticking out from the right side. Expected Results: Edit field within table cell.
Attached file Reporters testcase
Component: General → Layout
Product: Firefox → Core
QA Contact: general → layout
Version: unspecified → 1.9.0 Branch
Status: UNCONFIRMED → NEW
Ever confirmed: true
Keywords: testcase
Summary: <input type="text"...> rendering problem → <input type="text" style="width: 100%"> sticks out of table
Here is another test page, that clearly showes that it is a bug in the handling of input-type-text, and not other elements. http://henriko.se/extern/forminput/test.html
This problems happen because the borders and padding is added on after the width of 100% is calculated. the default display for an input is "auto" and auto on an input field is calculated to the value of "size". My proposed fix is for browsers to allow you to give your inputs a style similar to that of a div: display: block width: auto and that would override the use of the size field for calculations altogether
Version: 1.9.0 Branch → Trunk
Blocks: 526549
> My proposed fix is for browsers to allow you to give your inputs a style > similar to that of a div: > display: block > width: auto You can get pretty close with: "-moz-box-sizing: border-box; width: 100%" as long as your margins are 0. This looks invalid to me; the behavior is as expected given the CSS specs.
Status: NEW → RESOLVED
Closed: 15 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: