Make WordPress Core

Opened 3 years ago

Closed 3 years ago

#42662 closed defect (bug) (invalid)

Height of .wp-admin select is insufficient

Reported by: morvy Owned by:
Milestone: Priority: normal
Severity: minor Version:
Component: Administration Keywords:
Focuses: ui, administration Cc:


Height is set to 28px together with line-height. This is not enought as with padding the field should have 33px. Changing the height to auto (same as for input[text] or select[multiple]) fixes this problem.

Change History (3)

#1 @afercia
3 years ago

  • Keywords reporter-feedback added
  • Version 4.9 deleted

@morvy welcome to Trac and thanks for your report. Could you please clarify if you're seeing any visual glitch related to the select height? If so, could you please attach a screenshot?

On large screens, the select elements have an height of 28px with a 2px padding but they also inherit box-sizing: border-box; from the user agent stylesheet. I don't see a problem with that. I'm not sure I understand why 33px would be a better option. On small screens, in the responsive view, the select elements get a bit taller, as many other form elements do. The responsive view could be certainly improved a bit.

#2 @morvy
3 years ago

  • Severity changed from normal to minor

In administration, those 28px are OK, but for example WooCommerce changes the padding of elements to 6px, increasing the size of select resulting in cropped text. I understand this is a "problem" of WooCommerce or any other plugin that changes default UI, but leaving out the height attribute or changing it to auto (same as select[multiple]) can fix this issue for both default UI and plugins like WooCommerce.

#3 @afercia
3 years ago

  • Keywords reporter-feedback removed
  • Milestone Awaiting Review deleted
  • Resolution set to invalid
  • Status changed from new to closed

Quickly checking latest WooCommerce 3.2.4 I see they change the selects and inputs size, for example the one above the list tables:

.post-type-product .tablenav input,
.post-type-product .tablenav select,
.post-type-shop_order .tablenav input,
.post-type-shop_order .tablenav select {
    line-height: 32px;
    height: 32px

I also see they use a 6px padding on the Select2 "selects" but I don't see any cropped text. Regardless, as you mentioned, plugins that override the default UI style are responsible for the changes they made.

Worth also mentioning that selects are particularly difficult to style consistently across different browsers and platforms. Some CSS properties are just ignored by some browsers and a fixed height is a way to have a consistent size.

As I don't see issues in the WordPress UI, I'm going to close this ticket but please do feel free to add more details and screenshots for any probems in the default UI.

Note: See TracTickets for help on using tickets.