#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)
Change History (11)
#2
follow-up:
↓ 3
@
4 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; }
#3
in reply to:
↑ 2
@
4 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.
This ticket was mentioned in Slack in #design by chaion07. View the logs.
4 years ago
#5
follow-up:
↓ 6
@
4 years ago
- Keywords needs-screenshots added
Hi
We need a screenshots from what the screen looks like currently and a screenshot for the proposed change to make it easier to give feedback.
Thanks!
#6
in reply to:
↑ 5
@
4 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
#7
@
4 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
@
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.
Related issue, but not an exact duplicate: #52151