434303 - textarea and text-inputs not same width

Status: RESOLVED INVALID

(Firefox :: General, defect)

Description

[Patrick Kilian]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9pre) Gecko/2008051704 Minefield/3.0pre
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9pre) Gecko/2008051704 Minefield/3.0pre

A Textarea with cols=80 and a text input with size=80 are not the same width. the text area is slightly wider.

Reproducible: Always

Steps to Reproduce:
<FORM action="tasks.php" method="post">
<INPUT type="text" id="title" name="title" size="80" maxlength=""><BR>
<TEXTAREA id="text" name="text" cols="80" rows="10"></TEXTAREA><BR>
<INPUT type="submit" value="Save">
</FORM>

Actual Results:  
text area is wider by 1-2 chars

Expected Results:  
same width for both fields

Comment 1

[Mats Palmgren (inactive)]

Attachment: Testcase

Comment 2

[Mats Palmgren (inactive)]

<textarea> makes room for scrollbars.  If you want to always have
the vertical scrollbar visible, even when it's not needed, you can
style it with 'overflow-y:scroll'.

-> INVALID

Comment 3

[Patrick Kilian]

If you fill enough text into the textarea to that the scrollbars apperas, then the usable area inside the textarea is smaller than the text input field. So either the textarea has to be larger (so that the active area with scrollbars matches the input field) or the textarea has to be small (so that the total width matches).

Comment 4

[Patrick Kilian]

Attachment: The html file where the bug was initially discovered

Comment 5

[Patrick Kilian]

Attachment: how the html pages renders

Note that neither the active area nor the total width of the textarea matches the size of the text input

Comment 6

[Mats Palmgren (inactive)]

Firefox uses proportional font for <input> and fixed-width font for
<textarea> by default, so you will never get the result you want
without first specifying the same fixed-width font for both.
Try adding:
<style> input, textarea { font-family:monospace; } </style>

Comment 7

[Patrick Kilian]

Ah thanks. Is that documented somewhere? Making the whole thing monospaced does indeed fix that problem.

Comment 8

[Mats Palmgren (inactive)]

> Is that documented somewhere?

Don't know.  You can always install Firebug or DOM Inspector which
allows you to inspect the default styles for any element, etc.
https://addons.mozilla.org/