Make WordPress Core

#54219 closed defect (bug) (fixed)

Updated 'screen-per-page' padding for better navigation appearance on all Screen Options > Pagination

Reported by: ankit-k-gupta's profile Ankit K Gupta Owned by: audrasjb's profile audrasjb
Milestone: 6.0 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-patch commit assigned-for-commit
Focuses: ui, css, administration Cc:

Description

'Number of items per page' option available under 'Screen Options', is misaligned due to common padding being used on multiple input types. Although other input[type="number"] available on 'Reading Settings' look fine.

Added specific padding for input[type="number"].screen-per-page. So all 'screen-per-page' arrows are properly aligned on all screens like Posts listing, Pages listing, Plugins.php, edit-comments.php, users.php, export-personal-data.php, erase-personal-data.php

Attachments (7)

54219.diff (434 bytes) - added by Ankit K Gupta 20 months ago.
Patch file with fix
Screenshot of Screenshot 2021-10-04 at 10.45.37 PM.png (909×399) (1).jpg (71.4 KB) - added by Ankit K Gupta 20 months ago.
Before the fix
Screenshot of Screenshot 2021-10-04 at 11.22.37 PM.png (909×399).jpg (71.5 KB) - added by Ankit K Gupta 20 months ago.
After the fix
Screenshot of Screenshot 2021-10-04 at 11.32.31 PM.png (953×537).jpg (71.7 KB) - added by Ankit K Gupta 20 months ago.
input[type="number"] on Reading Setting page (for reference)
54219.patch (353 bytes) - added by aezazshekh 20 months ago.
added patch
54219.2.patch (354 bytes) - added by mukesh27 20 months ago.
Patch created for common.css
54219-comparison.png (249.2 KB) - added by sabernhardt 14 months ago.
patch comparison, using Firefox 99/Windows 10

Download all attachments as: .zip

Change History (15)

@Ankit K Gupta
20 months ago

Patch file with fix

@Ankit K Gupta
20 months ago

input[type="number"] on Reading Setting page (for reference)

@aezazshekh
20 months ago

added patch

@mukesh27
20 months ago

Patch created for common.css

#1 @mukesh27
20 months ago

Hi there!

Thanks for the ticket.

54219.2.patch patch created against common.css

#2 @sabernhardt
17 months ago

#54398 was marked as a duplicate.

#3 @sabernhardt
17 months ago

  • Focuses css added
  • Milestone changed from Awaiting Review to 6.0

Setting the side padding to zero (54219.2.patch) works for me at any screen size.

And this could be better than the option of using the small-text class. I would prefer having these inputs a bit wider, though 3 digits fit within the 4em even with a larger font size (small-text has a fixed 65-pixel width on larger screens).

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


14 months ago

#5 @mehedi890
14 months ago

Thanks, @sabernhardt for the suggestion. I have tested with small-text class and it looks good to me.

@sabernhardt
14 months ago

patch comparison, using Firefox 99/Windows 10

#6 @sabernhardt
14 months ago

  • Keywords commit added

I was going to upload a patch with the small-text class instead, so we could compare them. However, simply changing the right padding in 54219.2.patch is better with text zoom and/or on smaller screens.

Recommending for commit.

#7 @audrasjb
14 months ago

  • Keywords assigned-for-commit added
  • Owner set to audrasjb
  • Status changed from new to accepted

Looks good to me, thanks!

#8 @audrasjb
14 months ago

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

In 53119:

Administration: Improved padding for pagination setting fields.

This changes improves paddings for the "Number of items per page" field available on list screens.

Props ankit-k-gupta, aezazshekh, mukesh27, sabernhardt, mehedi890.
Fixes #54219.

Note: See TracTickets for help on using tickets.