textarea and text-inputs not same width

RESOLVED INVALID

Status

()

RESOLVED INVALID
11 years ago
11 years ago

People

(Reporter: mail, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(3 attachments)

(Reporter)

Description

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

11 years ago
Created attachment 321512 [details]
Testcase

Comment 2

11 years ago
<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
Status: UNCONFIRMED → RESOLVED
Last Resolved: 11 years ago
Resolution: --- → INVALID
(Reporter)

Comment 3

11 years ago
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).
Status: RESOLVED → UNCONFIRMED
Resolution: INVALID → ---
(Reporter)

Comment 4

11 years ago
Created attachment 321559 [details]
The html file where the bug was initially discovered
(Reporter)

Comment 5

11 years ago
Created attachment 321560 [details]
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

11 years ago
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>
(Reporter)

Comment 7

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

Comment 8

11 years ago
> 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/
Status: UNCONFIRMED → RESOLVED
Last Resolved: 11 years ago11 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.