WordPress.org

Make WordPress Core

Opened 7 weeks ago

Last modified 8 days ago

#53115 accepted defect (bug)

Twenty Twenty: number inputs have too much padding

Reported by: helgatheviking Owned by: sabernhardt
Milestone: 5.9 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch needs-testing
Focuses: css Cc:

Description

The number input has so much padding that the browser's up/down buttons are not clickable.

With padding, the cursor never turns into a pointer cursor
https://share.getcloudapp.com/2Nuwpo4W

With padding removed, the cursor turns into a pointer and the up/down buttons are clickable
https://share.getcloudapp.com/7KuPWNDO

Note this gif is using WooCommerce.. which is applying a width to the input

.single-product form.cart input {
    width: 5em;
}

However, tweaking the width doesn't seem to have an impact one way or the other.

Attachments (3)

number-input-woocommerce-ltr-firefox.png (9.5 KB) - added by sabernhardt 2 weeks ago.
WooCommerce number input after patch (LTR) in Firefox
number-input-woocommerce-rtl-firefox.png (10.3 KB) - added by sabernhardt 2 weeks ago.
RTL number inputs have the increment buttons on the other side
53115.patch (773 bytes) - added by sabernhardt 13 days ago.
slight edit: adding zero before decimal point

Download all attachments as: .zip

Change History (10)

#1 @SergeyBiryukov
7 weeks ago

  • Component changed from General to Bundled Theme
  • Summary changed from Twenty Twenty number inputs have too much padding to Twenty Twenty: number inputs have too much padding

#2 @sabernhardt
7 weeks ago

  • Focuses css added

Except for a few random times, I have this problem in Firefox 88 (Windows 10 Home 20H2) when there is padding on the number input. However, I can use the increment buttons in Chromium-based browsers: Chrome, Edge, Opera, Vivaldi.

If this is a Firefox bug, it might be worth considering input[type="number"] {-moz-appearance: textfield} to hide those buttons so no one tries using them unsuccessfully. Using the arrow keys still works.

(Regarding the unrelated issue about the input width, WooCommerce already plans to make that selector more specific.)

#3 @helgatheviking
4 weeks ago

I was about to re-post this issue because it drives me nuts! Good thing I searched first. :)

Looks like you can set the padding to

padding-right: .5rem;

and the buttons become clickable again.

https://share.getcloudapp.com/6qu8jPX4

I hate SVN with the fire of 10,000 suns so here's a pull request at github:
https://github.com/WordPress/WordPress/pull/551

The RTL is a bit of a guess... I assumed that the number input buttons are on the other side in RTL?

#4 @sabernhardt
4 weeks ago

  • Keywords has-patch added
  • Milestone changed from Awaiting Review to 5.8

@sabernhardt
2 weeks ago

WooCommerce number input after patch (LTR) in Firefox

@sabernhardt
2 weeks ago

RTL number inputs have the increment buttons on the other side

#5 @sabernhardt
2 weeks ago

  • Owner set to sabernhardt
  • Status changed from new to accepted

@helgatheviking Thanks for the patch! That works for me, both with the WooCommerce quantity inputs and with a number input within a Custom HTML block. (Yes, the padding adjustment belongs on the other side for RTL because the increment buttons are on the opposite side.)

I tested on Windows browsers: Firefox, Chrome, Edge, Opera, Vivaldi

For consistency, though, it would be good to add a zero before the decimal for these values within both stylesheets:

input[type="number"] {
	padding-right: 0.5rem;
}

@sabernhardt
13 days ago

slight edit: adding zero before decimal point

#6 @sabernhardt
13 days ago

  • Keywords needs-testing added

53115.patch has the same change as PR 551, but with the leading zeros.

#7 @sabernhardt
8 days ago

  • Milestone changed from 5.8 to 5.9

Unless a committer thinks the patch is ready now, this can be tested and reviewed in the next release cycle.

Note: See TracTickets for help on using tickets.