0

It seems that some of the css on the table that shows the list of all the pages adversely reacts with one of my plugins, which adds a bunch of columns to the table. I'm pretty sure this is edit.php. At least, that's what's in the URL.

Using the developer tools in Chrome I noticed that the table contains a class called fixed, which adds table-layout:fixed to the table styles. Removing it clears up the problem.

The question is, how do I edit the styles for this table?

Here's the relevant code:

<form id="posts-filter" method="get">
...
<h2 class='screen-reader-text'>Pages list</h2>
<table class="wp-list-table widefat fixed striped pages">

The form element is the closet parent with an ID. The table with class wp-list-table is what needs to be targeted. Removing the fixed class fixes the problem, at least in the developer tools. How do I remove it?

1

I guess you are in edit.php so you can add style only for this admin page.

function enqueue_my_scripts($hook) {
if ( 'edit.php' != $hook ) {
    return;
    }
  //our script to remove fixed table class
 echo '<script>';
 echo '$( ".wp-list-table" ).removeClass( "fixed" )';
 echo '</script>';

}
add_action( 'admin_enqueue_scripts', 'enqueue_my_scripts' );

The explanation is basic first we check if we are in edit page then execute the remove class.

  • And drop this into functions.php? – fredsbend Apr 9 '16 at 6:51
  • Though I'm sure this would work, isn't there a way to just prevent the class from ending up on the styles for this table in the first place? Where are all these classes added to this table? – fredsbend Apr 9 '16 at 6:53
  • Yes. Drop it in functions.php – ashraf Apr 9 '16 at 10:04
  • @fredsbend CSS classes are added in WP_Posts_List_Table () class. If you implement your own post list you can override the get_table_classes() function. – Max Yudin Apr 9 '16 at 11:45
0

A bit of a hack fix, I installed Tampermonkey for Chrome (a userscript manager) and created the following userscript:

// ==UserScript==
// @name         Fix edit.php!
// @author       You
// @match        http://www.example.com/wp-admin/edit.php*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...

    function addGlobalStyle(css) {
        var head, style;
        head = document.getElementsByTagName('head')[0];
        if (!head) { return; }
        style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = css;
        head.appendChild(style);
    }
    addGlobalStyle('.fixed { table-layout:auto !important; }');

})();

It's light, so it doesn't slow down the page at all. As far as I can tell, the problem doesn't exist anymore since a WP update, but I still have the userscript just in case.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.