WordPress.org

Make WordPress Core

Opened 9 months ago

Closed 3 weeks ago

#52426 closed defect (bug) (duplicate)

Columns Width-CSS Problem in Post and Page List Table

Reported by: lospeso Owned by:
Milestone: Priority: normal
Severity: normal Version: 5.6
Component: Administration Keywords:
Focuses: css Cc:

Description

https://core.trac.wordpress.org/newticket

The width of the columns in the Post or Page table list is causing display issues in WordPress. This is especially when plugins, like Yoast, add columns.

The current CSS WordPress uses to display the table list of post or pages ends up creating a poor column layout display.

The CSS is coming from this WordPress File:

/wp-admin/load-styles.php

These are the "ISSUE" CSS entries:

.fixed .column-author, .fixed .column-format, .fixed .column-links, .fixed .column-parent, .fixed .column-posts {
    width: 10%;
}
.fixed .column-categories, .fixed .column-rel, .fixed .column-response, .fixed .column-role, .fixed .column-tags {
    width: 15%;
}
.fixed .column-date {
    width: 14%;
}

Here is the "FIX" I applied:

.fixed .column-author, .fixed .column-format, .fixed .column-links, .fixed .column-parent, .fixed .column-posts {
width: auto !important;
}
.fixed .column-categories, .fixed .column-rel, .fixed .column-response, .fixed .column-role, .fixed .column-tags {
width: auto !important;
}
.fixed .column-date {
width: auto !important;
}

I had use "Important" because I applied the fix using a browser extension called "Stylus", which allows me to use Custom CSS and apply it to any page the browser displays.

I tested this fix in other WordPress installations and the fix works fine.

The issue is certain columns were given widths of a certain size, instead of allowing the browser to automatically adjust the columns.

You can see the difference in the screenshots I created and named them accordingly (Issue & Fix) to match the above CSS I posted.

Images:
(1) 20210102-ISSUE-Current-Columns-Width-Post-List-Page.jpg

See Here: https://prnt.sc/y1r9nc

(2) 20210102-FIX-Current-Columns-Width-Post-List-Page.jpg

See here: https://prnt.sc/y1rd5i

Thank-you.

Attachments (2)

All-Posts-screen-current.jpeg (75.7 KB) - added by paaljoachim 6 months ago.
The current All posts screen with Yoast SEO plugin activated.
All-posts-screen-fix.jpeg (74.6 KB) - added by paaljoachim 6 months ago.
The All posts screen with Yoast SEO plugin activated. - the fix -

Download all attachments as: .zip

Change History (10)

#1 @sabernhardt
9 months ago

  • Component changed from General to Administration

Related issue, but not an exact duplicate: #52151

#2 follow-up: @sabernhardt
7 months ago

  • Focuses css added
  • Keywords needs-design-feedback added

I don't think we should simply remove all those width values from list-tables.css, as they can benefit the layout with only the default columns. Of course, it very quickly becomes a problem with additional columns, so something would need to change with the extra columns.

@lospeso, if you would like to edit your temporary fix to eliminate !important, you could use this instead:

.wrap .fixed .column-author, .wrap .fixed .column-format, .wrap .fixed .column-links, .wrap .fixed .column-parent, .wrap .fixed .column-posts, .wrap .fixed .column-categories, .wrap .fixed .column-rel, .wrap .fixed .column-response, .wrap .fixed .column-role, .wrap .fixed .column-tags, .wrap .fixed .column-date {
	width: auto;
}
Last edited 7 months ago by sabernhardt (previous) (diff)

#3 in reply to: ↑ 2 @mwarbinek
7 months ago

Replying to sabernhardt:

I don't think we should simply remove all those width values from list-tables.css, as they can benefit the layout with only the default columns. Of course, it very quickly becomes a problem with additional columns, so something would need to change with the extra columns.

@lospeso, if you would like to edit your temporary fix to eliminate !important, you could use this instead:

.wrap .fixed .column-author, .wrap .fixed .column-format, .wrap .fixed .column-links, .wrap .fixed .column-parent, .wrap .fixed .column-posts, .wrap .fixed .column-categories, .wrap .fixed .column-rel, .wrap .fixed .column-response, .wrap .fixed .column-role, .wrap .fixed .column-tags, .wrap .fixed .column-date {
	width: auto;
}

I came across this as I found the same issue.
Thanks for the fix.

Version 1, edited 7 months ago by mwarbinek (previous) (next) (diff)

This ticket was mentioned in Slack in #design by chaion07. View the logs.


6 months ago

#5 follow-up: @paaljoachim
6 months ago

  • Keywords needs-screenshots added

Hi

We need a screenshot from what the screen looks like currently and a screenshot for the proposed change to make it easier to give feedback.
Thanks!

Last edited 6 months ago by paaljoachim (previous) (diff)

#6 in reply to: ↑ 5 @lospeso
6 months ago

Replying to paaljoachim:

Hi

We need a screenshot from what the screen looks like currently and a screenshot for the proposed change to make it easier to give feedback.
Thanks!

I did.

Look at my initial post (ticket) at the top under the word "Images".
Thanks

@paaljoachim
6 months ago

The current All posts screen with Yoast SEO plugin activated.

@paaljoachim
6 months ago

The All posts screen with Yoast SEO plugin activated. - the fix -

#7 @paaljoachim
6 months ago

  • Keywords needs-design-feedback needs-screenshots removed

Hey @lospeso

I went ahead and added the images directly to the ticket.
Thank you for the fix. It looks a lot better as it more evenly distributes the column widths.

#8 @sabernhardt
3 weeks ago

  • Milestone Awaiting Review deleted
  • Resolution set to duplicate
  • Status changed from new to closed

Any fix for this would also relate to #52151, so I'll close the ticket here. Please continue the conversation on that ticket.

Note: See TracTickets for help on using tickets.