Horizontal Scrolling at top of table
Hi there,
I am happy about the Horizontal Scroll feature of Admin Columns as I am mimicking a very large Spreadsheet with lots of columns (with much success!).
However, there are also lots of rows… and horizontal scrolling would be great if it were available across the top as well. I saw some examples creating dummy div tags and what not. Then I would need some JQuery to put it in place… I was just hoping someone had a working solution already for WordPress/AdminColumns that I could implement.
Thanks,
Keith
I found a better workaround for this… which you can see below.
But first, to put it into context…
We have a table showing say… 100 records. The user wants to be able to scroll horizontally to see all records. However, since we are also displaying lots of records, the user has to scroll to the bottom of the page to find the horizontal scrollbar. This isn’t ideal, because then he cannot look at the top/middle records.
So… even a top scrollbar wouldn’t have worked, so I decided to use a “floating” scrollbar instead. I found a solution and implemented it in minutes, and it works beautifully!
Here are the steps (and code):
1) Download the JS from here.
2) Upload it to your server (at your own discretion). I uploaded mine to a “js” folder in the root.
3) Add the following code to a custom plugin…
Note: In my example I am selective on what Admin page I wanted to use it (i.e. the Posts List page for the “projects” CPT). You don’t have to be.
<?php
/* START: Loads floating scrollbar JS */
function cc_load_floating_scrollbar() {
global $pagenow;
if ( is_admin() && $pagenow=='edit.php' && 'projects' === $_GET['post_type']) {
wp_enqueue_script( 'cc_floating_scrollbar', '/js/jquery.ba-floatingscrollbar.js' );
}
}
add_action( 'admin_enqueue_scripts', 'cc_load_floating_scrollbar' );
/* END: Loads floating scrollbar JS */
/* START: Attaches floating scrollbar to Projects List Table */
function cc_attach_projects_list_table_to_floating_scrollbar() {
echo "<script type='text/javascript'>";
echo " ( function ( $ ) {";
echo " $( document ).ready( function () {";
echo " $('.acp-overflow-table table.wp-list-table.fixed').floatingScrollbar();";
echo " });";
echo " }( jQuery ) );";
echo "</script>";
}
add_action( 'admin_head', 'cc_attach_projects_list_table_to_floating_scrollbar' );
/* END: Attaches floating scrollbar to Projects List Table */
?>oops… forgot the same conditional statement in the 2nd block of code to be sure that I attach it only on the Projects Posts List… but you get the idea!
p.s. tested in latest Edge, Firefox, and Chrome. Works like a charm!
Hi Keith,
Thanks for the snippet and possible solution for this problem.
I tried it on my local environment but without any luck, but I get the picture.
To be honest I don’t have the missing scrollbar issue since I use a mouse that can scroll horizontal.
Although I like the improvement, I don’t think it is really something that we will include in our plugin. We try to stay as close as possible to the default WordPress interface and introducing a new feature and library like this is something we usually try to avoid. But I’ve added a note for this so we can discuss this within the team.
Cool. Yeah, I wouldn’t expect it to be part of core. Just sharing, that’s all :)
You must be logged in to reply to this topic.