Horizontal Scrollbar Missing in Database Admin View

Hi Michael

I feel a bit foolish now, because when I scroll to the bottom of the database admin page the horizontal scrollbar is there ??

However, I’m sure that the scrollbar behaviour has changed, because I believe it used to be always present wherever one was situated on the page in the vertical direction.

As the scrollbar now operates, you have to scroll down the page until you get to the final record on the page (I usually show 25 records per page), then scroll right (without being able to see the column headings, because they’ve scrolled off the top), then scroll back up to look at the record you want (without being able to see or scroll to any fields to the left – or further right – of the current browser view). To pinpoint a record/field that you want to look at/edit you may need to repeat the above manoeuvres.

The new scrollbar behaviour is pretty inconvenient and unlike the way other wide webpages work so I’m still wondering if the behaviour is a bug.

I changed the default behavior so that rows (up to 100 by default) are displayed in the table on the page, making the table longer and pushing the scroll bar down. This was in response to complaints that it was confusing that some rows were hidden when only 25 or the 100 were displayed…

Hi Michael

Unfortunately, and as I described earlier, this change makes the admin display virtually unusable for anyone who has more columns in their form than will fit across a browser viewed at a reasonable resolution (1024 x 768) – we don’t all use higher resolutions viewable with widescreen monitors. At my screen resolution there is only room for 12 columns, and that includes the “Delete” column and the “Submitted” column – ie there’s only sufficient room to see 10 data columns and without the ability to scroll right at any row, not just the last, that is simply not enough for my application (and I wouldn’t have thought I’m a lone voice).

Is it not possible to have the horizontal scrollbar in view all the time, not just at the bottom of the displayed rows? It seems that the issue arises because the scrollbar is attached to the database “window” rather than to the actual browser.

Other possibilities (because I have invested so much time in your great plug-ins and want to keep using them): Would it be possible to have an option to choose the preferred scrollbar behaviour? Or is the new default behaviour something I could override in a child theme?

For now, the only way to override it is to edit the file ExportToHtmlTable.php

find this line:
'"bJQueryUI": true, "aaSorting": [], "iDisplayLength": -1, "aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "' . __('All', 'contact-form-7-to-database-extension') . '"]]';

Change the
"iDisplayLength": -1
to
"iDisplayLength": 25

PS or when you view the page, manually select 25 instead of “All” from the tables’s menu

Hi Michael

Sorry it has taken me so long to get back to this thread and try implementing the change you suggested.

Unfortunately, it didn’t help me to get the display that I need – which is how the admin data display used to work ??

What I want is to have the horizontal scroll bar appear at the bottom of my browser window (the part of the page in view at any one time) no matter how many records of a table I have on display in the admin section. In other words, as I scroll up and down the page using the vertical scroll bar, I want the horizontal scroll bar to always be in view at the bottom of the browser window.

Basically, I just want to go back to the previous arrangement you had which was exactly the behaviour I’ve described in the preceding paragraph.

Unfortunately, neither of your suggestions above achieved this. Do you have any other suggestions? Can you point me to what the code used to look like (presumably still in the ExportToHtmlTable.php file?) so I can try to revert the new default view behaviour to the old default view behaviour?

Thanks in advance

Gillian,

The only change I made was to change default number of rows displayed from 25 to all. And you can change that by changing what is in “Show” to a smaller number of entries. In doing some searching about datatables.net, there does not appear to be a way to automatically have it adjust to the size you want.

That being said, you can fix the height of the table. To do so, you would edit CFDBViewWhatsInDB.php. Locate the following code. Add the line indicated. “400” is the height. Adjust that to a number that makes the table fit in the screen.

` jQuery(document).ready(function() {
oTable = jQuery(‘#<?php echo $tableHtmlId ?>’).dataTable({ <?php // “sDom”: ‘Rlfrtip’, // ColReorder ?>
“bJQueryUI”: true,
“aaSorting”: [],
“sScrollY”: “400”, // Add this line
“bScrollCollapse”: true,
“sScrollX”:”100%”,
“iDisplayLength”: <?php echo $maxVisible ?>,
“aLengthMenu”: <?php echo $menuJS ?>
`

Hi Michael

Thanks for looking at this again.

It seems from your answers on this thread that I might not have made it clear that it is the horizontal (i.e. “x”) scrollbar that I have had an issue with, not the vertical (i.e. “y”) scrollbar.

My issue wasn’t that I want to have the height of the table automatically adjusted. My problem has always been that I could not scroll to the right to see all the columns (“x” scrollbar), nor scroll back to the left, unless I first scrolled right to the bottom of the table where the “x” scrollbar sits. I actually wanted the “x” scrollbar to detach itself from the table and instead attach itself to the browser window.

I spent some time researching this myself on the weekend and I found a temporary fix using Firebug in Firefox (I changed 2 scroll classes to overflow:visible). Of course, this only worked until I refreshed the page!

Looking again at the “jquery.dataTables.js” file after I saw your latest reply, I found a section I’d missed before, referring to the horizontal scrollbar:

Enable horizontal scrolling. When a table is too wide to fit into a certain layout, or you have a large number of columns in the table, you can enable x-scrolling to show the table in a viewport, which can be scrolled.

The example given in the file to implement a viewport horizontal scrollbar is
"sScrollX": "100%",

The default value, however, is a null string – meaning this option is disabled.
"sScrollX": "",

I saw that in your code above you used the “100%” value, and I remembered seeing that in the “CFDBViewWhatsInDB.php” file on the weekend but wasn’t aware of its significance at the time.

I have now edited the “CFDBViewWhatsInDB.php” file to replace the 100% value with a null, and my problem is solved!

Now being aware of the correct terminology, I can succinctly say that I had a horizontal toolbar on the viewport rather than on the browser, so sorry if I confused you before by not using the term “viewport” in my original question.

I would love you to add an option to your plugin, so I don’t have to repeat my edit on each plugin update, and so people could choose where they want the horizontal scrollbar to appear if they have a large number of columns. Alternatively, I suggest you revert to the default (disabled) setting which has better utility.

Whatever you decide to do, thanks for pointing me in the right direction to fix the issue ??