WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

Last modified 4 years ago

#37024 closed defect (bug) (fixed)

Safari Quick Edit input[number] text not entirely visible

Reported by: joelwills Owned by: rachelbaker
Milestone: 4.6 Priority: normal
Severity: normal Version: 4.4
Component: Administration Keywords: has-patch has-screenshots commit
Focuses: ui Cc:

Description

THE ISSUE

Using an input[number] field in Quick Edit results in the numbers not being entirely visible. Safari only (tested in OSX).

Tested in Chrome and Firefox OSX and is not an issue there.

https://cldup.com/-Z-pYbL0E5.jpg


STEPS TO REPRODUCE

When in wp-admin under Posts, or Pages, select Quick Edit. Add/change one of the fields to be type="number".

(Or a plugin like WooCommerce will create a number field like this under Products when Manage stock is enabled for that product).


THE CAUSE

The input[number] line-height is set to inherit, and is too large (35px). Setting to a smaller number fixes it.


THE SOLUTION

wp-admin/css/forms.css, line 69.

Change:

/* Vertically align the number selector with the input. */
input[type="number"] {
	height: 28px;
	line-height: inherit;
}

To

/* Vertically align the number selector with the input. */
input[type="number"] {
	height: 28px;
	line-height: 1;
}

Tested in Chrome and Firefox and cannot see any affects. Changed forms.css attached.

Attachments (6)

forms.css (24.4 KB) - added by joelwills 4 years ago.
Updated CSS, line 73 changed
37024.diff (386 bytes) - added by kraftbj 4 years ago.
joelwills contribution in patch form
chrome-before-patch.png (25.7 KB) - added by kraftbj 4 years ago.
safari-before-patch.png (25.8 KB) - added by kraftbj 4 years ago.
chrome-after-patch.png (25.8 KB) - added by kraftbj 4 years ago.
safari-after-patch.png (29.8 KB) - added by kraftbj 4 years ago.

Download all attachments as: .zip

Change History (12)

@joelwills
4 years ago

Updated CSS, line 73 changed

#1 @kraftbj
4 years ago

  • Focuses ui added
  • Milestone changed from Awaiting Review to 4.6
  • Owner set to kraftbj
  • Status changed from new to accepted

Howdy Joel and thanks for the patch. We have a guide at https://make.wordpress.org/core/handbook/contribute/ on how to create patches for your future reference.

I've tested and confirmed the original issue and patch (upload incoming). I'm also attaching before and after on Safari and Chrome.

@kraftbj
4 years ago

joelwills contribution in patch form

#2 @kraftbj
4 years ago

  • Keywords has-patch has-screenshots added

#3 @joelwills
4 years ago

Looks great, thanks!

#4 @rachelbaker
4 years ago

  • Keywords commit added
  • Owner changed from kraftbj to rachelbaker
  • Status changed from accepted to assigned

#5 @rachelbaker
4 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 37693:

Administration: Set a defined line-height for number type inputs to fix display issue in Safari.

Fixes #37024.
Props joelwills, kraftbj.

#6 @ocean90
4 years ago

  • Version changed from trunk to 4.4

Introduced in [34514].

Note: See TracTickets for help on using tickets.