Category list table breaks when custom post type label is too long

[andrewryno]

Registered a post type which has a longer label than "posts" (called "resources"). List table listing the categories for that post type breaks slightly when a name is over a certain length. Picture attached.

Offending CSS is setting a 10% width to that column.

I can provide a patch. Though since the number of posts is centered, the heading is left aligned. If that column is widened, should the title be centered as well (since left-aligned may look weird at one point)?

[scribu]

I propose we don't use the post type label there at all, as it's not accurate anyway. Just use 'Count' or some other fixed string.

[scribu]

Related: #14076

[andrewryno]

Replacing the label with "Count" also wouldn't require any CSS changes. I can upload a patch later if we want to change it to that (or any other standardized word).

[SergeyBiryukov]

Related: #15993

[andrewryno]

Fixed in [18875]? Rather than wrapping, it just gets hidden. Suggest closing, although there could possibly be a better option.

​http://d.pr/zjpX

[helenyhou]

[18875] was reverted, so not fixed there. However, I like the idea of "Count", given #14076/#14084.

[philipjohn]

My first patch! Yay :) At WordCamp Sheffield Contributor Day, by the way...

This patch adds the following;

• Checks if the post type name is longer than 5 characters
• If so, use '#' as the column header instead
• Otherwise, uses the post type name

It still falls back to "Posts" if the post type object isn't available.

I tried using "Count" but more often than not the T disappeared producing a similar result to the example given for this bug, so didn't seem an appropriate solution.

Hash ('#') was chosen as something that is (probably) universally recognised as meaning "number"/"count". I'm not confident of that, hence why I've put it through the i18n function but thoughts welcome on that (hence why I haven't updated POT either).

[philipjohn]

On s1m0nd's suggestion I've updated the patch to use the contextual gettext function.

[seanchayes]

Functionally the patch (17209b.diff) does what it sets out to do.

I created my custom post type and associated a taxonomy. While on the taxonomy edit screen (edit-tags.php) the number sign appeared when my custom post type name was longer than 5 characters. When I adjusted the length of the name it below 5 characters it displayed the name.

Talking to the point of andrewryno, cosmetically, the last column now looks a little out of horizontal alignment (see image) - the content alignment for the last column could perhaps be improved for a more consistent layout on that edit-tags.php screen. (perhaps a suggestion might be that .column-posts could be text-align:left;)

I did revert the patch and saw that when the slug name is used to title the column this alignment issue seemed to be less prevalent.

[GaVrA]

First patch while working on it at WordCamp Switzerland during contributors day... :)

I attached 17209.2.diff​ which does the following:

1. changes the label to # and makes it centered because it makes it consistent with other list table views, like Posts column on the wp-admin/users.php
2. replaces generated html so there is only one span element inside the anchor and places triangle icon via :after pseudo-element to that span element
3. applies some css changes so that the labels can be centered and the triangle icon is positioned absolutely next to the label.
4. applies same css changes for RTL except different positioning, i.e. on the left side of the string
5. it does not address accessibility concerns, so we might put title attribute with real post name, like Number of Posts
6. removes some old css, I guess, for .sortable-indicator, both for LTR and RTL:

th.sorted.asc .sorting-indicator, 
th.desc:hover span.sorting-indicator { 
        display: block; 
        background-position: 0 0; 
} 
 
th.sorted.desc .sorting-indicator, 
th.asc:hover span.sorting-indicator { 
        display: block; 
        background-position: -7px 0; 
}

From my testing this works both on hovering over th.sortable and when orderby is applied via GET, i.e. when you click some th.sortable anchor. Also, I have tested RTL with plugin rtl-tester and everything is working.

Here are some screenshots using # before applying css changes:

small number

large number

Some screenshots after applying css changes:

small number

large number

when sorted

RTL when sorted

[helen]

I still like the word "Count", which should fit just fine, and would be more accurate than continuing to put the post type name there, since that's not accurate. It shows the count across all post types. Doesn't matter where you're viewing it. That it's linked and can lead you to seeing that there are no posts in that category is another issue entirely.

Not sure center aligned is a good idea, but should definitely make the header and column align, I guess on the left for LTR.

GaVrA: for the future, RTL is generated in Grunt, so you don't need to patch it.

[philipjohn]

I'd tried "Count" (agree that would be better) but found that in many screen sizes both the C and T were partially or wholly cut off. I hadn't attempted to widen the column in the hopes of keeping it simple, but that could be revisited.

[GaVrA]

At around 800px screen size you can clearly see what philipjohn said:

[GaVrA]

Oh and setting that count column to 80px pretty much fixes that issue on all screen sizes(on mobile it the triangle icon was breaking the layout).

[seanchayes]

I've refreshed 17209b.diff and within it I have set a fixed width on that last column and also reverted to titling it "Count".

I found that setting the width to 74px worked consistently across multiple devices sizes allowing the sorting triangle to appear in the same spot. 80px seemed a little wide.

17209c.diff contains these changes.

[nacin]

Assigning to Helen for review (and to remove this ticket from the good-first-bugs report).

[SergeyBiryukov]

I'm not a fan of conditionally changing the label here.

strlen() is not an accurate check for UTF-8 strings, and it looks like 'Count' is more correct (per comment:14), so I'd suggest removing the check and using 'Count' instead of the post type label.

[GaVrA]

What about smaller screens( comment:16 )?

[SergeyBiryukov]

The width issue appears to be resolved in the latest patch (per comment:18).

[mordauk]

Just tested 17209c.diff and it seems to work fine for me!

[sumobi]

https://core.trac.wordpress.org/attachment/ticket/17209/17209c.diff also works great for me at all resolutions.

[helen]

In 29343:

Use the word "Count" instead of the post type label in taxonomy list tables to prevent layout issues. It is also more accurate, as it represents a count of all post types, not just one.

props philipjohn, GaVrA, seanchayes. fixes #17209.