Closed
Bug 440415
Opened 16 years ago
Closed 14 years ago
<input type="text" style="width: 100%"> sticks out of table
Categories
(Core :: Layout, defect)
Core
Layout
Tracking
()
RESOLVED
INVALID
People
(Reporter: varlou, Unassigned)
References
(Blocks 1 open bug)
Details
(Keywords: testcase)
Attachments
(1 file)
|
302 bytes,
text/html
|
Details |
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.
|
||
Comment 1•16 years ago
|
||
|
|
||
Updated•16 years ago
|
Component: General → Layout
Product: Firefox → Core
QA Contact: general → layout
Version: unspecified → 1.9.0 Branch
|
||
Updated•16 years ago
|
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
|
||
Updated•14 years ago
|
Version: 1.9.0 Branch → Trunk
|
||
Comment 5•14 years ago
|
||
> 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: 14 years ago
Resolution: --- → INVALID
You need to log in
before you can comment on or make changes to this bug.
Description
•