Closed Bug 434303 Opened 16 years ago Closed 16 years ago

textarea and text-inputs not same width

Categories

(Firefox :: General, defect)

x86
Linux
defect
Not set
normal

Tracking

()

RESOLVED INVALID

People

(Reporter: mail, Unassigned)

Details

Attachments

(3 files)

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
Attached file Testcase
<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
Closed: 16 years ago
Resolution: --- → INVALID
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 → ---
Note that neither the active area nor the total width of the textarea matches the size of the text input
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>
Ah thanks. Is that documented somewhere? Making the whole thing monospaced does indeed fix that problem.
> 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
Closed: 16 years ago16 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: