Improving the admin UI for Hierarchical Taxonomies

[husobj]

For hierarchical taxonomies like categories on the edit post in the admin pages, the terms are listed with checkboxes in a scrollable box which has a set height of 200px. If you only have a few terms then the box ends up being much bigger than needed wasting lots of vertical screen real estate. This is particularly frustrating if you create multiple hierarchical taxonomies.

I propose changing the height of the box to use css max-height instead so that the box collapses if you only have a few terms.

See the screengrabs at he post I've written here.
​http://www.benhuson.co.uk/2010/12/20/improving-the-ui-for-hierarchical-taxonomies-in-wordpress/

I've attached a preliminary patch too.

Obviously IE6 doesn't support css max-height. Do we need to use an IE hack for this or are we OK if the category box height doesn't restrain in IE6?

wp-admin.dev.css patch

Seems like a straightforward enhacement.

This is one of those small things that makes a difference. +1

@scribu: I'm not sure why you removed the ui keyword. Adding back in.

Oups... didn't see it.

We have no ui ​trac keyword.

To support IE6 I guess we could add something into the ie admin stylesheet: /wp-admin/css/ie.css

height: expression( this.scrollHeight > 200 ? "200px" : "auto" ); /* sets max-height for IE */

...actually scratch that. Not needed as you can just keep the height declaration in the IE stylesheet

Great idea

With about 5px of padding-bottom added, I think this is a really great idea.

Replying to JohnONolan:

With about 5px of padding-bottom added, I think this is a really great idea.

Can John or someone verify and patch this?

Doh, you just got in there before me with that patch ;)

Replying to nacin:

With about 5px of padding-bottom added, I think this is a really great idea.

Can John or someone verify and patch this?

I've added 0.8em, and now the padding to the left and to the bottom is equal (if that's the desired result). See the screenshot.

The space above the tab is more narrow than in 3.2.1, probably due to other CSS changes elsewhere.

The space above the tab is more narrow than in 3.2.1, probably due to other CSS changes elsewhere.

Probably from #18314. We should fix that in this patch too.

@azaozz, would this patch be impacted by any of the CSS changes you've been working on, or any of the responsive admin stuff?

Punting enhancements from 3.3.

Replying to SergeyBiryukov:

The space above the tab is more narrow than in 3.2.1, probably due to other CSS changes elsewhere.

Not anymore. Refreshed the patch, also reduced vertical padding. Screenshot: 15925.after.2.png​.

We already have flexible height on the Menus screen, 15925.2.patch​ makes it consistent.

Tested in Firefox 15, Chrome 21, IE 7, IE 8, Opera 12.

Great! I'm sure this little improvement is especially useful now that more and more WP users are:

• accessing the web from mobile devices with limited screen size.
• using custom taxonomies rather than one gigantic list of categories.

Tested successfully in Firefox 17 (OSX), Safari 5 (OSX), Safari on iOS 5 (iPod).

Note: ​ocean90 has voiced some concerns regarding a "jump" than can occur when switching from the All Categories to Most Used tab – but I think that's a very minor downside vs the benefit in screen estate.

In [21971]:

Use max-height rather than height for the hierarchical taxonomy admin metabox. props SergeyBiryukov, husobj. fixes #15925.

This could also use a min-height: ​http://cl.ly/image/2k3a3M0J2T0J

I also would not like to see a jump for All to Most Used.

15925.3.patch​ adds min-height.

15925.4.patch​ also makes both tabs have equal height (not sure if that's necessary though).

I tested both. +1 for 15925.3.patch.

In [22290]:

Add min-height to hierarchical taxonomy meta box. Props SergeyBiryukov. fixes #15925

Can you do the same on the Quick-Edit?

I have 4 hierarchical taxonomies on Quick-Edit, it would be nice if it will be less longer.

Replying to ramiy:

Can you do the same on the Quick-Edit?

Feel free to create a new ticket for that.