771493 - Consider changing the default width of <input type=number>, maybe depending on the min and max values

Status: NEW

(Core :: Layout: Form Controls, defect)

Description

[Raphael Catolino (:raphc)]

The <input type=number> element should be smaller than the default <input type=text>.

Comment 1

[Mounir Lamouri (:mounir)]

Actually, I don't know if we should keep the <input type='text'> size which could make sense for backward compatibility reasons or use another (kind of arbitrary) size...

Comment 2

[Raphael Catolino (:raphc)]

Attachment: patch

Comment 3

[Raphael Catolino (:raphc)]

Attachment: screenshot

Mounir, does that size seems ok to you?

Comment 4

[Boris Zbarsky [:bzbarsky]]

Raphael, have you looked into what Chrome does?  I believe it sizes the input based on the min and max values...

It's not clear to me that changing the size of a completely vanilla number input is that desirable.

Comment 5

[Raphael Catolino (:raphc)]

(In reply to Boris Zbarsky (:bz) from comment #4)
> Raphael, have you looked into what Chrome does?  I believe it sizes the
> input based on the min and max values...
> 
I've talked about this with Mounir and he pointed out that webdevs might not expect a variable length and that it may create layout problems for them.

> It's not clear to me that changing the size of a completely vanilla number
> input is that desirable.
It was actually only designed to differentiate it from the text input, but once the layout for this input is implemented, this won't be a problem.

Comment 6

[Mounir Lamouri (:mounir)]

Comment on attachment 639652 [details] [diff] [review]
patch

Review of attachment 639652 [details] [diff] [review]:
-----------------------------------------------------------------

(I wrote that comment last week but I realized I never actually sent it...)

Maybe we could simply imitate Chrome's behaviour for the moment. Instead of a default col's value for number, you could compute the value like this:

if min or max isn't set:
  return DEFAULT_COLS (20)
digitsMin = NumberDigitsOf(min); // including '-'
digitsMax = NumberDigitsOf(max); // including '-'

return MAX(digitsMin, digitsMax);

The only alternative I see is to keep the same size for <input type=text> and <input type=number>.

Comment 7

[Raphael Catolino (:raphc)]

Attachment: patch

This patch makes the input elements for which min/max apply change their size according to their min/max values.
I added a reflow on min/max change for those types.

Comment 8

[Mounir Lamouri (:mounir)]

Comment on attachment 642896 [details] [diff] [review]
patch

I prefer to delegate that review to Boris. He might have a better opinion on what we should do here. I'm quite hesitating between taking that patch or keeping the same default's size as <input type='text'>.

Comment 9

[Boris Zbarsky [:bzbarsky]]

Comment on attachment 642896 [details] [diff] [review]
patch

>+  maxLength = (maxLength > minLength) ? maxLength : minLength;
>+  return maxLength == 0 ? DEFAULT_COLS : maxLength;

So for <input type="number" min="1"> this will return 1, no?

Whereas for <input type="number" min="0.0000000" max="0"> this will return 9?

That seems somewhat counterintuitive to me.  Is that really the desired behavior?

And also, for <input type="number" min="0" max="1" step="0.001"> this will return 1, which definitely seems wrong.

In Chrome the behavior definitely depends on the value of "step", and there seems to be a minimum size of 4 chars.  Also, the width always seems to be 1 more than strictly needed; not sure whether that's a bug or on purpose.

Comment 10

[Sint]

Just wanted to add that since the latest Firefox update this issue deserves more attention.

Also see: https://bugzilla.mozilla.org/show_bug.cgi?id=1015068