Make WordPress Core

Opened 8 years ago

Closed 8 years ago

Last modified 8 years ago

#32691 closed defect (bug) (fixed)

No-wrap the date column on post listing screens

Reported by: johnbillion's profile johnbillion Owned by: wonderboymusic's profile wonderboymusic
Milestone: 4.4 Priority: normal
Severity: normal Version:
Component: Posts, Post Types Keywords: good-first-bug has-patch has-screenshots
Focuses: ui, administration Cc:


When viewing a post listing screen in excerpt mode, the Date column can easily become very narrow. When the date text wraps, it looks awful.

Preventing wrapping in this column might be an option. Might also get messed up in some browsers due to the table-layout:fixed on the list table.

Attachments (4)

Screen Shot 2015-06-18 at 01.30.13.png (11.7 KB) - added by johnbillion 8 years ago.
post-table-column-width-fix.32691.diff (407 bytes) - added by gaelan 8 years ago.
before.png (49.8 KB) - added by wonderboymusic 8 years ago.
after.png (49.0 KB) - added by wonderboymusic 8 years ago.

Download all attachments as: .zip

Change History (15)

#1 @johnbillion
8 years ago

Screenshot of what I'm talking about

#2 @swissspidy
8 years ago

Depends on the date format settings. On my de_DE install it doesn't look bad with the date on the first line and time on the second.

With a simple

.column-date {
  white-space: nowrap;

the layout is quite broken:

We should consider adding white-space: nowrap for the table headings though.

#3 @McGuive7
8 years ago

Agreed that the following rule makes additional styling fairly difficult to accomplish in any sort of flexible way:

table.fixed {
  table-layout: fixed;

Most columns seem to be set to a hard 10% with the exception of the checkbox column and the excerpt column. My question is: why is this .fixed class in use? It seems like overkill given responsive best practices and prevents natural resizing for the table. Anyone know of other screens/situations in which these hard widths are necessary?

#4 @gaelan
8 years ago

First post here, looking to start helping with bug fixes.

Simply removing the .fixed class from the table seems to help. The text wraps nicely in Excerpt mode even at very small table widths once that class is removed.

But there's a lot of CSS that depends on that class being in place. If .fixed is removed, the rest of the column widths aren't declared anymore and things like the comment bubble icon get broken. I'd be hesitant to remove that class and just start rewriting all that CSS, especially as a newbie.

Changing the CSS for .fixed tables to table-layout: auto seems to work nicely, but I'm not sure what the impact of the change would be across the rest of the back-end. Can anyone confirm this suggested fix?

#5 @m00nshield
8 years ago

  • Keywords has-patch added; needs-patch removed

8 years ago

8 years ago

#6 @wonderboymusic
8 years ago

  • Keywords has-screenshots added
  • Milestone changed from Awaiting Review to 4.4

#7 @wonderboymusic
8 years ago

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

In 34083:

Use table-layout: auto (instead of fixed) on table.fixed to ensure that things like date/time don't horrendously wrap on small screens. Before/After screenshots attached to the ticket.

Props gaelan.
Fixes #32691.

#8 @ocean90
8 years ago

  • Resolution fixed deleted
  • Severity changed from minor to normal
  • Status changed from closed to reopened

[34083] will break tables which have long "words" which aren't wrapped, see screencast:
The same happens with the Syntaxhighlighter plugin.

#9 @wonderboymusic
8 years ago

In 34709:

Revert [34083], I was willing to try this out for the greater good. The good was not greater. There is too much baggage associated with this specific change as pertains to BC and expected layout.

See #32691.

#10 @wonderboymusic
8 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 34710:

List Tables: .column-date needs to become wider at smaller screen sizes, bump it from 10% to 14% at the breakpoint to prevent wrapping.

Fixes #32691.

#11 @gaelan
8 years ago

Agreed on the fix, had a feeling changing the table layout would cause an issue.

Note: See TracTickets for help on using tickets.