When you increase the number of columns on the WordPress management screen, they may be displayed outside the column as shown in the red frame below.
This can be resolved fairly easily using the method below, so I’m posting it as a memo.
How to prevent the admin screen columns from overflowing
Causes of overflowing lines
The main cause of overflowing columns on the management screen is that the style settings (style code) for the overflowing column are missing, and the columns displayed to the right (after) of the column with the missing style. Occurs only if there is no.
Therefore, you may get the impression that this will suddenly happen at some point.
Resolve overflowing columns by giving them style
First, while the overflowing column is displayed, check the CSS class for that column in the console (open with Developer Tools – “F12”).
In the example image above, it looks like this.
The style code for this column looks like this.
.widefat tfoot tr td, .widefat tfoot tr th, .widefat thead tr td, .widefat thead tr th {
color: #2c3338;
}No style is specified specifically for this column (this is what causes the overflow).
To solve this, add the following style.
.column-imsanity {
width: 10%;
}However, it is necessary to apply the style on the management screen side, and even if you add code to the theme’s additional CSS etc., it will not be reflected. If your theme has a stylesheet for it, add it there; if not, add the code below to functions.php of the enabled theme.
function pwcn_admin_column_style_init(){
?>
<style>
.column-imsanity {
width: 10%;
}
</style>
<?php
}
add_action('admin_footer','pwcn_admin_column_style_init');In this example, the column output by the “Imsanity” plugin happened to overflow, so be sure to check the CSS class for a specific column using the developer tools each time.
.column-column name
