Make WordPress Core

Opened 3 years ago

Closed 3 years ago

Last modified 3 years ago

#52426 closed defect (bug) (duplicate)

Columns Width-CSS Problem in Post and Page List Table

Reported by: lospeso's profile 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 3 years ago.
The current All posts screen with Yoast SEO plugin activated.
All-posts-screen-fix.jpeg (74.6 KB) - added by paaljoachim 3 years ago.
The All posts screen with Yoast SEO plugin activated. - the fix -

Download all attachments as: .zip

Change History (11)

#1 @sabernhardt
3 years ago

  • Component changed from General to Administration

Related issue, but not an exact duplicate: #52151

#2 follow-up: @sabernhardt
3 years 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 3 years ago by sabernhardt (previous) (diff)

#3 in reply to: ↑ 2 @mwarbinek
3 years 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 have the same issue and was searching for a fix and came across this post string.

Thanks for the fix.

Last edited 3 years ago by mwarbinek (previous) (diff)

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


3 years ago

#5 follow-up: @paaljoachim
3 years 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 3 years ago by paaljoachim (previous) (diff)

#6 in reply to: ↑ 5 @lospeso
3 years 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
3 years ago

The current All posts screen with Yoast SEO plugin activated.

@paaljoachim
3 years ago

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

#7 @paaljoachim
3 years 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 years 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.

This ticket was mentioned in Slack in #core-css by sabernhardt. View the logs.


3 years ago

Note: See TracTickets for help on using tickets.