1024078 - Input Type=number Spinner should not be affected by Padding

Status: NEW

(Core :: Layout: Form Controls, defect)

Description

[Wei]

Attachment: Comparison with Chrome

User Agent: Mozilla/5.0 (Windows NT 6.0; WOW64; rv:30.0) Gecko/20100101 Firefox/30.0 (Beta/Release)
Build ID: 20140605174243

Steps to reproduce:

Create an input type="number" with some padding, like below:

http://jsfiddle.net/2MVuZ/2/


Actual results:

The spinner buttons are floating in the middle of the input because they are affected by padding.


Expected results:

The spinner buttons should stick to the right and stretch to the input height, like in Chrome. Also, Arrow button of drop-down list should not show up differently when there is a border.


This is similar to Bug 963970 – Arrow of drop-down list should not be affected by padding which was fixed in Firefox 30: https://bugzilla.mozilla.org/show_bug.cgi?id=963970

Comment 1

[Boris Zbarsky [:bzbarsky]]

Is this not a duplicate of bug 1000077?

Comment 2

[Daniel Holbert [:dholbert] (PTO until 2/24)]

(In reply to quan.we from comment #0)
> The spinner buttons should stick to the right and stretch to the input
> height, like in Chrome.

What version of Chrome did you test?

Chrome 37 renders your jsfiddle just like Firefox does (as is the case over on bug 1000077), with padding to the right of the spinners.

Comment 3

[Daniel Holbert [:dholbert] (PTO until 2/24)]

(In reply to Boris Zbarsky [:bz] from comment #1)
> Is this not a duplicate of bug 1000077?

I think it is. Reporter, see bug 1000077 comment 7 and bug 1000077 comment 8.

Comment 4

[Wei]

I used Chrome 35...

Well, the spinners should match the behavior of the select dropdown button and not be floating in the middle. Right now, the click area of the spinners is so disproportionate from the size of the input, especially when the button size is half the size of the select button.

Comment 5

[Daniel Holbert [:dholbert] (PTO until 2/24)]

(In reply to quan.we from comment #4)
> I used Chrome 35...

Cool. Based on the other bug, I think you'll notice that Chrome 36 & beyond match the Firefox behavior on the spinner-placement here.

> Well, the spinners should match the behavior of the select dropdown button
> and not be floating in the middle.

I agree that the inconsistency w/ <select> (RE whether padding affects the arrows) is a bit jarring. They arguably should be consistent.  jwatt, do you know if this has been considered / brought up elsewhere?

> Right now, the click area of the spinners
> is so disproportionate from the size of the input

Yeah, I also agree that it's bad that the spinners stay tiny even when the control is huge. That probably deserves its own dedicated bug. (It also happens with e.g.
  data:text/html,<input type="number" style="height: 80px">
so this part isn't really padding-specific.)

Comment 6

[Daniel Holbert [:dholbert] (PTO until 2/24)]

(In reply to Daniel Holbert [:dholbert] from comment #5)
> > Right now, the click area of the spinners
> > is so disproportionate from the size of the input
> 
> Yeah, I also agree that it's bad that the spinners stay tiny even when the
> control is huge.

(Ah, this part is bug 947365.)

So, the outstanding question here is whether we should try to be consistent with the right-snapped (even in the face of padding) dropdown-arrow on <select>.

Comment 7

[Boris Zbarsky [:bzbarsky]]

Note that the dropdown arrow on <select> is basically a background image, not an independent child element which the user can interact with separately, like in this case.  So it has quite different behavior wrt padding simply because backgrounds paint under the padding...

Comment 8

[Wei]

The right-snapped dropdown-arrow change was recently introduced in FF 30 because buttons floating in the middle of input field looks very ugly, especially when the buttons have borders themselves. (Chrome doesn't have outstanding borders on select/spinner buttons.) Bug 963970

Spinners should be right-snapped for better usability and make things look less broken regardless of Chrome.

This is the ideal look:
http://codepen.io/Thomas-Lebeau/pen/csHqx

Comment 9

[Jonathan Watt [:jwatt]]

Ideally I think content authors should have control here and be able to get either behavior (spinner inside padding, or spinner unaffected by padding). That would imply standard pseudo-elements, or something, though, and currently nobody seems to have the cycles to figure out what that mechanism should be, and get it through the working groups.

In lieu of that, I think authors and users would most often prefer to have the spinner buttons be the full height and right aligned (so unaffected by padding, and covering the same area as <select>'s dropdown arrow). That behavior also provides more flexibility since if the author wants the other behavior they need only wrap the <input> in another element and put the padding on that.

Comment 10

[Alfred Kayser]

Longstanding issue that is causing Firefox to be less nice for input type=number than the other browers...