Make WordPress Core

Opened 15 months ago

Last modified 10 days ago

#40218 new defect (bug)

Button and select box alignment issue in page view

Reported by: sagarprajapati Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-patch has-screenshots ui-feedback needs-testing
Focuses: ui Cc:



Button and select box are not aligned in the page view. I have attached screenshot for more information.


Attachments (4)

desktop.png (86.7 KB) - added by sagarprajapati 15 months ago.
mobile.png (35.4 KB) - added by sagarprajapati 15 months ago.
40218.patch (741 bytes) - added by sagarprajapati 15 months ago.
40218.2.patch (5.2 KB) - added by sagarprajapati 15 months ago.

Download all attachments as: .zip

Change History (16)

#1 @sagarprajapati
15 months ago

  • Keywords has-patch added


Attached patch is the solution of the above issue. Please check it.


#2 @swissspidy
15 months ago

  • Component changed from General to Administration
  • Focuses accessibility removed
  • Keywords has-screenshots added

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

15 months ago

#4 @swissspidy
15 months ago

  • Keywords ui-feedback added

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

15 months ago

#6 @afercia
15 months ago

With the introduction of native fonts, see #36753, the actual height of some elements depends on the actual font used on a specific platform, and by the different font rendering engine. That is, the elements height will be different on macOS, Windows, Linux, etc.

This is probably an issue that should be addressed holistically, after some serious research.

I think one of the first steps could be ensuring all the buttons and form elements use a line-height.

#7 @sagarprajapati
15 months ago

Thank you @afercia for the response. I understand your point, So anything should I research on this point. How can I help you on this point? What is the action for me? Please guide me.


#8 @afercia
15 months ago

@sagarprajapati I've seen there are also other tickets reporting misalignments of form elements, I guess for the same reason (the native fonts). It's a very broad issue and difficult to handle. Actually, there's a chance that fixing the alignments on one platform (let's say on Windows), could make thing worse on macOS or vice-versa.

One option would be trying to analyse all the tickets reporting such misalignments, doing some research, trying to find a way to have a correct alignment across all platforms/browsers etc. It would be a challenging task, not sure one single person can handle that :)

#9 @sagarprajapati
15 months ago

@afercia thank you for the direction.

Yes, this is the tough task to handle by a single person but I am trying my best to work with this task. Today I have research on full admin panel and found that there is few elements like textbox, select box, button need to be set in specific height and line height. Also, need to remove some unnecessary margin or padding.

I have fixed all these things in above my latest patch. I have checked in different viewport, browsers and checked in windows platform, all the thing is working fine. Please review it.

This ticket was mentioned in Slack in #design by karmatosed. View the logs.

9 months ago

#11 @melchoyce
9 months ago

  • Keywords needs-testing added

#12 @JoshuaWold
10 days ago

We met as a design team at Core Contributor day and discussed what’s happening. We’d love to have someone share a screenshot of the change that was presented here in the latest patch?

Note: See TracTickets for help on using tickets.