Make WordPress Core

Opened 4 years ago

Last modified 4 years ago

#49820 new defect (bug)

Input and select elements are misaligned in the admin area

Reported by: luigipulcini's profile luigipulcini Owned by:
Milestone: Awaiting Review Priority: normal
Severity: trivial Version: 5.4
Component: Administration Keywords: needs-patch
Focuses: ui, css, administration Cc:

Description

When placed side by side with inline select boxes, input elements are vertically misaligned in the admin area. Setting vertical-align to middle after line 78 of the /wp-admin/css/forms.css file – similarly to how select boxes are defined later in this stylesheet – seems to fix the problem.

Attachments (3)

input-text-no-vertical-align.png (5.1 KB) - added by luigipulcini 4 years ago.
Input-select boxes misalignment before suggested patch
input-text-vertical-align.png (5.0 KB) - added by luigipulcini 4 years ago.
Input-select boxes misalignment after suggested patch
001.png (1.8 KB) - added by man4toman 4 years ago.

Download all attachments as: .zip

Change History (7)

@luigipulcini
4 years ago

Input-select boxes misalignment before suggested patch

@luigipulcini
4 years ago

Input-select boxes misalignment after suggested patch

#1 @man4toman
4 years ago

Hi @luigipulcini
I check it on latest version of Google Chrome and Firefox, but everything is fine. Please look at my attachment.

@man4toman
4 years ago

#2 @luigipulcini
4 years ago

Thanks for your feedback, @man4toman.

I noticed that you tested it for inputs that are children of the tablenav top class, which doesn't show any misalignment even in my case.

My test was in a different environment, though, since I was interested in placing a text box side by side with a select box in a page of the Settings.

This is what I did in order to make a quick test:
1 – go to "Settings > General"
2 – inspect the page in the Developer Tools
3 – from the td node referring to the "Site Title" option, select and copy the textbox node
4 – inspect the row referring to the "New User Default Role" option, which is the first select box on the page
5 – select the td node and paste the input box copied on step 3 as a child of the td node

I have just repeated the same process in:
– Chrome 80.0.3987.163 (Windows 10)
– Firefox 75.0 (Windows 10)
– Edge 44.18362.449.0 (Windows 10)
– Safari 11.1.2 (OSX 10.11.6)

getting the exact same result across all the browsers.
Furthermore, assigning the vertical-align: middle to the input box fixes the misalignment in every browser I tested.

Some further notes:
– for every browser, I made sure the cache was fresh;
– the test was run on a WordPress installation with zero plugins installed and a custom theme that I have just started building, so it has no styling whatsoever, especially for the backend.

Last edited 4 years ago by luigipulcini (previous) (diff)

#3 @man4toman
4 years ago

Thanks @luigipulcini for the explanation, I can reproduce it now.
As you said, the reported problem will be fix by adding vertical-align: middle to the input box.

#4 @luigipulcini
4 years ago

Great, @man4toman!
I am glad I was able to help you reproduce the issue.

Note: See TracTickets for help on using tickets.