1295827 - Size attribute does not make input wide enough when using non-default font

Status: RESOLVED INVALID

(Core :: General, defect)

Description

[rohit.vighne]

Attachment: ff-input-size-bug.html

User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36

Steps to reproduce:

1. Create an <input type="text">
2. Set the size attribute to a (large) number, X
3. Type more than X characters in


Actual results:

The width of the text of the input exceeded the width of the input box itself. Thus, moving the cursor was required to "scroll" horizontally within it.

See the attached HTML file for a demo. Alternatively, this fiddle: https://jsfiddle.net/dfygxbxg/


Expected results:

The input box should have been at least as wide as the text within it, making it unnecessary to "scroll."

Comment 1

[rohit.vighne]

Sorry, I posted this report from Chrome, so the user-agent is wrong. Here is my actual UA string:

Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:50.0) Gecko/20100101 Firefox/50.0

Comment 2

[Ciprian Muresan [:cmuresan], Formerly of Ecosystem QA - please needinfo @mcoman for things regarding the team]

Hi,

I did manage to reproduce this on the latest Firefox release and the latest Nightly, but I could reproduce also on IE, Edge and Chrome. As such I did a bit of digging around and found that this is not a Firefox issue. 
It's a general HTML issue, so the size attribute should be the number of characters visible, but that's true only for monospace fonts.

"However, unless the font specified is a fixed-width/monospace font, this is not a guarantee that the specified number of characters will actually be visible; in most fonts, different characters will be different widths. This question has some good answers relating to this issue." 
(quote found here:) http://stackoverflow.com/questions/1480588/input-size-vs-width

"The problem is that the size = x attribute isn't in pixels... rather, it denotes the very approximate size that the <input /> element must be to hold x characters. So, for example, <input size=2 /> should display a input box that can hold 2 characters." 
(quote found here:) http://stackoverflow.com/questions/6699575/size-attribute-for-an-input-field-not-being-honored

As this issue is not a Firefox one, I will mark it as Resolved - Invalid.

Comment 3

[Firefox Bug Husbandry Bot]

Moving from Core::Untriaged to Core::General https://bugzilla.mozilla.org/show_bug.cgi?id=1407598