Make WordPress Core

Opened 9 years ago

Closed 7 years ago

Last modified 7 years ago

#28984 closed defect (bug) (fixed)

Inputs (type=number) look too flattened

Reported by: caspie's profile Caspie Owned by: michaelarestad's profile michaelarestad
Milestone: 4.5 Priority: normal
Severity: normal Version: 3.8
Component: Administration Keywords: has-patch needs-testing
Focuses: ui, administration Cc:


Add line-height and height to number inputs to look similar to other inputs in the WP admin.

Patch is not too aggressive - covers inputs of the mentioned type, which also have small|large|regular-text class.

Attachments (7)

input-type-number.png (15.8 KB) - added by Caspie 9 years ago.
28984.diff (836 bytes) - added by Caspie 9 years ago.
field-height.png (30.6 KB) - added by eliorivero 9 years ago.
field-height.patch (2.1 KB) - added by eliorivero 9 years ago.
28984.2.png (80.2 KB) - added by valendesigns 9 years ago.
28984.2.diff (508 bytes) - added by valendesigns 9 years ago.
28984.3.diff (505 bytes) - added by michaelarestad 8 years ago.

Download all attachments as: .zip

Change History (19)

9 years ago


9 years ago


#1 @Caspie
9 years ago

  • Keywords has-patch needs-testing added

#3 follow-up: @helen
9 years ago

  • Keywords reporter-feedback added


#4 in reply to: ↑ 3 @Caspie
9 years ago

Replying to helen:



So far I saw it on latest Firefox, Chrome and IE. Even though each browser renders number field differently, it looks flattened in general. Haven't checked Safari.
Win 8.1

Last edited 9 years ago by Caspie (previous) (diff)

#5 @celloexpressions
9 years ago

  • Keywords reporter-feedback removed
  • Milestone changed from Awaiting Review to Future Release
  • Version changed from trunk to 3.8

Though it's not as bad as in the screenshot, I can confirm that number inputs have a different total height (23px) than selects (28px) in Chrome, and there looks to be a similar issue in Firefox. Text inputs are 27px.

#6 @eliorivero
9 years ago

Just checked and issue is valid and not only for number fields but any text input field. Tested Chrome, Firefox and Opera, screenshot above.

Added broader patch that solves this and also removes the "px" in a couple of "0px" occurrences.

9 years ago

9 years ago

#7 @valendesigns
9 years ago

I went with a little less specificity and fixed the height in mobile, as well.

#8 @helen
8 years ago

#28223 was marked as a duplicate.

This ticket was mentioned in Slack in #core by helen. View the logs.

8 years ago

#10 @michaelarestad
8 years ago

Looks like the changes are good. I moved them around a bit to keep with the current grouping patterns in forms.css, but left the values in tact.

Not really this issue, but mobile is pretty dang rough for form elements. I think we should attempt a redesign of the mobile form patterns because views like this are problematic:

#11 @michaelarestad
7 years ago

  • Owner set to michaelarestad
  • Resolution set to fixed
  • Status changed from new to closed

In 35831:

Administration: Adds a height to number inputs.

Number inputs didn't match the height of other form elements. Now they have a height of 28px and 40px on mobile. Both align with the sizes of other elements.

Props valendesigns.
Fixes #28984.

#12 @swissspidy
7 years ago

  • Milestone changed from Future Release to 4.5
Note: See TracTickets for help on using tickets.