CSS on default admin list table view is messy

  • Resolved Jonas Lundman

    (@jonas-lundman)


    7 years, 5 months ago

    This visual problem has been for a while and its time to report the issue. CSS on default list table view is messy. The WP default markup changed some updates ago and MLA has not followed, and now it becomes a problem to view.

    td.column-title

    The whole table is fixed and the th columns shoul use nowrap instead, in LIST view. The markup inside this main td cell is also not logical. Its hard to fix the big jumps and the linebreaks when the image is sharing the container and title information.

    Check was made on clean Twentysiteen install. Remark, List view, not Grid view.

    Consider to use default markup from Worpdress default list table view for main column cells.

    We always (did) use MLA to our clients, but lately they prefer the original library because its more clean to read & and use -even if they missing all the goodies. However, today I realized myself it is messy to use MLA and I aslo reverted to the build in Library view when working with articles.

    • This topic was modified 7 years, 5 months ago by Jonas Lundman. Reason: Missed important information
Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter Jonas Lundman

    (@jonas-lundman)

    After digging into this, we solved the image views so far. The class name .column-title is missing on the primary (Where the image is) column. MLA is using its own classname here, and not using build in widefat context. It seeem we can pull over the .column-title to .column-primary, as MLA leaves this intact.

    
/* START MLA Fix */
/* Replicates the WordPress built in Media library table styles */

table.attachments .column-title strong,
table.attachments .column-primary strong {
    display: block;
    margin-bottom: .2em;
    font-size: 14px;
}

table.attachments .column-title .media-icon,
table.attachments .column-primary .media-icon {
    float: left;
    min-height: 60px;
    margin: 0 9px 0 0;
}

table.attachments .column-title .media-icon img,
table.attachments .column-primary .media-icon img {
    max-width: 60px;
    height: auto;
    vertical-align: top;
}

/* Optional */
table.attachments th.column-primary {
    width: 300px;
}

/* Optional */
table.attachments th.column-primary ~ th {
    width: 10%;
}

/* END MLA FIX */
    Thread Starter Jonas Lundman

    (@jonas-lundman)

    Seems stable, marking this as solved.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘CSS on default admin list table view is messy’ is closed to new replies.