WordPress.org
Get WordPress

Make WordPress Core

Opened 20 months ago

Closed 14 months ago

#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

Before the fix

@Ankit K Gupta
20 months ago

After the 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.