WordPress.org

Make WordPress Core

Opened 7 years ago

Closed 7 years ago

Last modified 7 years ago

#26136 closed defect (bug) (fixed)

Inline SELECT elements misaligned in Discussion Settings

Reported by: jeremyfelt Owned by: iammattthomas
Milestone: 3.8 Priority: high
Severity: trivial Version: 3.8
Component: Administration Keywords: has-patch
Focuses: ui Cc:

Description

The vertical-align: top; style for .wp-admin select elements in the new admin style causes some weird alignment issues when a single line in the admin has multiple types of input.

This seems most obvious in the Discussion Settings page:

http://f.cl.ly/items/120a1o2m0n1l2130283Q/Screen%20Shot%202013-11-20%20at%208.27.21%20PM.png

Comparing to 3.7.1 shows that we had vertical-align: middle; previously, which resolves the issue on this particular page. I'm not sure what else this may affect throughout core though.

Patch attached. Everything in Chrome 31, OSX.

Attachments (2)

26136.diff (361 bytes) - added by jeremyfelt 7 years ago.
Screen Shot 2013-12-30 at 2.48.18 PM.png (22.4 KB) - added by johnjamesjacoby 7 years ago.
http://local.wordpress.dev/wp-admin/options-discussion.php

Download all attachments as: .zip

Change History (8)

@jeremyfelt
7 years ago

#1 @SergeyBiryukov
7 years ago

  • Component changed from General to Administration

#2 @matt
7 years ago

  • Priority changed from normal to high
  • Severity changed from normal to trivial

#3 @iammattthomas
7 years ago

  • Owner set to iammattthomas
  • Resolution set to fixed
  • Status changed from new to closed

In 26384:

Make sure that select elements vertically align properly with other text. Fixes #26136, props jeremyfelt.

#4 follow-up: @johnjamesjacoby
7 years ago

  • Milestone changed from 3.8 to 3.9

Having any vertical alignment set triggers alignment issues in different browsers.

Attaching a screenshot to show what it looks like currently in current versions of Safari and Chrome. (You'll notice a 3px difference between the first label and the second label.)

#5 @johnjamesjacoby
7 years ago

I have only tested in OS X, but removing the vertical-alignment completely helps (though it doesn't completely fix the problem either.) The problem is the height differences between input (checkboxes) and select drop-downs, namely that the selects are set to 28px and checkboxes are set to 16px.

Since we're already reserving height and width settings for checkboxes to 16px to handle the painting of the checkbox itself, setting the height to a matching 28px isn't an option.

Removing the vertical-alignment and height settings for select elements should do the trick, though it needs testing in other operating systems.

Last edited 7 years ago by johnjamesjacoby (previous) (diff)

#6 in reply to: ↑ 4 @SergeyBiryukov
7 years ago

  • Milestone changed from 3.9 to 3.8

Replying to johnjamesjacoby:

Having any vertical alignment set triggers alignment issues in different browsers.

This ticket was closed on a completed milestone, please open a new one.

Note: See TracTickets for help on using tickets.