Make WordPress Core

Opened 12 years ago

Closed 12 years ago

#21752 closed enhancement (fixed)

Dropdown for "Show all dates" should have a flexible width

Reported by: targz's profile tar.gz Owned by: nacin's profile nacin
Milestone: 3.5 Priority: normal
Severity: normal Version: 3.4.1
Component: UI Keywords: has-patch
Focuses: Cc:

Description

In the admin interface, when we have a list view of posts, such as in /wp-admin/edit.php, there is a dropdown menu with the string "Show all dates". This dropdown menu has a fixed width of 155 pixels, defined by the following CSS rule:

/wp-admin/css/wp-admin.dev.css (lines 822 – 824):

.tablenav select[name="m"] {
width: 155px;
}

This fixed width is problematic for languages where the string is longer, such as in French ("Afficher toutes les dates"). Here, 155px is just slightly too short, and the final "s" is missing. It would look better if the width would be flexible, like this:

.tablenav select[name="m"] {
width: auto;
}

This change is also beneficial for english users, since the interface becomes more compact, no wasted space!

If we want to set a hard limit for languages where the string could be extremely long, in order not to break the interface, we could set a max-width value, maybe 200px. So the final code would be:

.tablenav select[name="m"] {
width: auto;
max-width: 200px;
}

PS: max-width is supported by IE7 and newer: http://caniuse.com/#feat=minmaxwh

Attachments (5)

21752.patch (318 bytes) - added by SergeyBiryukov 12 years ago.
21752.2.ie8-bug-1.png (1.5 KB) - added by SergeyBiryukov 12 years ago.
21752.2.ie8-bug-2.png (4.3 KB) - added by SergeyBiryukov 12 years ago.
21752.2.patch (591 bytes) - added by SergeyBiryukov 12 years ago.
21752.2.after.png (11.8 KB) - added by SergeyBiryukov 12 years ago.

Download all attachments as: .zip

Change History (10)

#1 @SergeyBiryukov
12 years ago

  • Keywords has-patch added
  • Milestone changed from Awaiting Review to 3.5

I guess the purpose of that rule is to make the menu not too narrow. We could use min-width for that.

#2 @nacin
12 years ago

We should probably change both the "m" and "cat" dropdowns to have a max-width of probably 200px, and otherwise let them be as narrow as the language allows.

#3 @SergeyBiryukov
12 years ago

Introduced in [9328], altered in [12357] (for #11293).

21752.2.patch removes fixed width from the dropdowns and adds max-width.

Screenshot: 21752.2.after.png. Tested in Firefox 15, Chrome 21, IE 7, IE 8, Opera 12.

IE 8 has two bugs:

The patch addresses both.

#4 @tar.gz
12 years ago

Great!

Tested also in Safari 5 (OSX) and IE 9 (Vista), working fine.

#5 @nacin
12 years ago

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

In [21916]:

Flexible widths for select boxes above list tables. For posts, that means bulk actions and date/category filters. Opens up more room (can prevent wrapping) and allows for longer localized strings. props SergeyBiryukov, fixes #21752.

Note: See TracTickets for help on using tickets.