Opened 12 years ago
Closed 12 years ago
#21752 closed enhancement (fixed)
Dropdown for "Show all dates" should have a flexible width
Reported by: |
|
Owned by: |
|
---|---|---|---|
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)
Change History (10)
#2
@
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
@
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:
- If fixed width is not set, longer strings overlap with the arrow: 21752.2.ie8-bug-1.png.
- Options that are wider than the select's set width are cropped: 21752.2.ie8-bug-2.png (currently happens in trunk).
The patch addresses both.
I guess the purpose of that rule is to make the menu not too narrow. We could use
min-width
for that.