Opened 5 years ago
Last modified 5 years ago
#49820 new defect (bug)
Input and select elements are misaligned in the admin area
Reported by: | 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)
Change History (7)
#1
@
5 years ago
Hi @luigipulcini
I check it on latest version of Google Chrome and Firefox, but everything is fine. Please look at my attachment.
#2
@
5 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.
Input-select boxes misalignment before suggested patch