Make WordPress Core

Opened 7 years ago

Last modified 4 days ago

#40218 new defect (bug)

Button and select box alignment issue in page view

Reported by: sagarprajapati's profile sagarprajapati Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-screenshots needs-refresh
Focuses: ui Cc:



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


Attachments (6)

desktop.png (86.7 KB) - added by sagarprajapati 7 years ago.
mobile.png (35.4 KB) - added by sagarprajapati 7 years ago.
40218.patch (741 bytes) - added by sagarprajapati 7 years ago.
40218.2.patch (5.2 KB) - added by sagarprajapati 7 years ago.
Screenshot_3.jpg (98.2 KB) - added by mmitrev 5 years ago.
download (1).png (32.9 KB) - added by mmitrev 5 years ago.

Download all attachments as: .zip

Change History (23)

7 years ago

#1 @sagarprajapati
7 years ago

  • Keywords has-patch added


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


#2 @swissspidy
7 years 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.

7 years ago

#4 @swissspidy
7 years ago

  • Keywords ui-feedback added

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

7 years ago

#6 @afercia
7 years 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
7 years 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
7 years 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
7 years 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.

6 years ago

#11 @melchoyce
6 years ago

  • Keywords needs-testing added

#12 @JoshuaWold
5 years 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?

#13 @mmitrev
5 years ago

Hey, I pulled the 40218.2 patch and checked the changed locally.
Overall it looks better than the original images, however a slight adjustment could still be made:

  1. On desktop - the misalignment is hardly visible, however I have a question there - Are we measuring it based on the bottom shadow of the Apply button (refer to Screenshot_3)?
  2. On mobile there's a slightly more noticeable misalignment ( the screenshot has it zoomed to better see that ) - refer to download (1).png for specifics.

5 years ago

5 years ago

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

4 years ago

#15 @kjellr
4 years ago

  • Keywords ui-feedback removed

I'm going to remove the ui-feedback label for now — these should be aligned if possible. Sounds like the patch just needs some more testing. 👍

#16 @andraganescu
4 years ago

  • Keywords needs-refresh added; has-patch needs-testing removed
  • Milestone changed from Awaiting Review to Future Release

Hi there,

The issue is a bit broader but the idea is good. We need a patch that covers both desktop and mobile and solves as many of the misalignments as technically possible.

#18 @prowphelp
4 days ago

Hello Everyone,

I've been following the discussion on the alignment issue of buttons and select boxes in WordPress and would like to offer some insights and suggestions that might help in resolving this bug.

Understanding the Core Issue:

The misalignment seems to stem from variations in font rendering across different operating systems and browsers. This can affect the size and positioning of UI elements.

Additionally, default styles applied by browsers to form elements can lead to inconsistencies.

Proposed Solutions:

CSS Reset for Form Elements:

Implement a CSS reset specifically for form elements. This can help standardize the look across different browsers and platforms.

Use of Flexible Units:

Consider using flexible units (like em or rem) for dimensions and spacing, as they scale better across different screen sizes and resolutions.

Line-Height Uniformity:

Ensuring a consistent line-height for buttons and select boxes can aid in vertical alignment.

Cross-Browser and Cross-Platform Testing:

It's crucial to test the changes across various browsers (Chrome, Firefox, Safari, etc.) and platforms (Windows, macOS, Linux). Tools like BrowserStack can be beneficial for this purpose.
Mobile responsiveness should also be a priority, considering the wide usage of WordPress on mobile devices.

Consideration for Accessibility:

While addressing alignment, it's important to ensure that these changes do not negatively impact accessibility. For instance, ensuring sufficient contrast and clickable area.

Community Collaboration:

Gathering more feedback and patch tests from the community can provide a broader range of insights, especially from those who use WordPress in different environments.

Setting up a dedicated testing group or a beta version for this specific issue might be beneficial to gather focused feedback.

Documentation and Comments in Code:

Whatever changes are implemented, documenting them thoroughly will help future developers understand the reason behind certain decisions. Inline comments in the CSS or patch files can be very useful.

Fallback for Older Browsers:

Consider including fallback styles for older browsers that might not support certain CSS properties.

Monitoring and Iteration:

Once a solution is deployed, continuously monitor the issue for any reports of inconsistencies and be prepared for iterative improvements.

I hope these suggestions prove helpful. The collaborative effort in addressing this issue is commendable, and I'm looking forward to seeing a refined user interface in future WordPress releases.

Last edited 4 days ago by prowphelp (previous) (diff)
Note: See TracTickets for help on using tickets.