How can we easily move the horizontal scroll bar, from below to above the datatable?
The Visual composer plugin is also enabled. It would be ideal to just be able to put add a short code or css there, rather than change the php files.
Client requested this feature to make search result navigation more user friendly.
This is a very large datatable (with MANY columns and tall rows) with a lot of text, so the scrollbar under the table is usually not immediately visible, and people don't realize that they should scroll sideways to see the rest of the columns.
Focus groups have said the sideways scrolling navigation option of the datatable is not obvious enough, as is.
There is no standard way to do this. There is a fix but I am not sure if I recommend doing this because it relays on browser behaviour. Anyway here is a code that you can input in CustomCSS filed on Settings page:
Your code worked great on OSX 10,95 viewing with Chrome v. 53.0.
Unfortunately, the whole datatable disappeared when viewing with Safari Version 9.1.3
I had not yet implemented Milo's related functions.php fix to move the pagination row above the table (or duplicate). So I'll try and see if your browser dependent code works in combination.
I tested it in Safari 10 in my dev environment and it's working as you can see in the attachment. If you have tables that don't have scroll turned on maybe it is better to just add this code on page where you can tables with scrolling. Just add it between <style> tags in text tab of your page editor.
I appreciate your followup. The scroll bar showed up in my version of Safari too... but the problem was that the whole datatable content (grid lines and content inside) disappeared! It was fine in Chrome.
I think my customized datatable is more complicated and fragile than your example. I used the following CSS code you kindly gave me Aug 17 (ID: #21998):
#table_1 { width: 3500px! important; }
... It allows for horizontal scrolling while having a fixed width table. I put it in Visual Composer's Custom CSS, before I realized wpDataTable had a custom CSS area under Settings. However, it worked.
I was unable to thank you, because comments were closed on the old support system. So thank you for that!
:)
Perhaps this is why Milo's recent code for a fix via function.php file also broke the table width limit (with horizontal scroll).
[] Now that you know this, can suggest a different fix?
[] Also, are you able to tell me how to stretch the search filters sidebar, and datatable, the full width of the page? (see attachment)
This would be a huge help, because my client has SO many columns. I didn't ask, because I thought that was only fixable through the Wordpress Theme AthenaPro customization... or MAYBE Visual Composer.
As I already mentioned this is more of a fix then proper solution for your request but there is no proper solution because scrollbar is under browser control and unfortunately we cannot do much about that.
I don't see any reason why this code doesn't work because -webkit-transform: is supported from Safari 9. It must be something else that preventing table from working normally.
As a full page width this is more of a question for theme developer. If you want us to do that for you it will require hiring one of our developers because work like this is not included in this support.
I understand, that we are dealing with fringe solution that will vary with each browser. If your solution didn't damage the table width limit in Safari, I would use it.
The wordpress theme vendor Athena-Pro, gave me the following CSS custom code for their bootstrap based theme, to stretch the width of your whole dataTable and sidebar search filter, to fit edge to edge in the browser window. It works in Chrome, but not Safari (but it didn't break it), so I can use it. I've not tested it with an iPad, but it's width is 768px, which matches the minimum width in the code below.
You could probably do a more thorough fix, but I offer this here, in case it is good enough for some people... I hope thats ok. Maybe it will eliminate some nuisance work for you! ;)
Thank you very much for sharing the solution. I'm sure that it will be helpful for other customers.
I still think that this CSS code should not break the table. Safari supports both CSS rules. Maybe you can apply this code and send me a link so I can take a look or give me temporary admin credentials so I can try it myself.
I wish the CSS code you provided did not break the table width, but as you can see by the attached 2 screenshots:
• using Chrome, with perfect table with scrollbar above the datatable, and • using Safari with NO table! (the table is there, because it occasionally flickers in view)
Is that a clue?
I did everything I could think of to eliminate any CSS interference. For example, I removed some curly quotes I found in the code, and otherwise cleaned it up. I did not replace my client's quotation marks (in text content), as it seems like Visual Composer (or Wordpress) converts it automatically. I also deactivated some unnecessary plugins to test.
Thank you for your follow up. Sorry for my slow response. I've been sick and traveling so catching up on everything. I don't have easy access to another computer with Safari.
However, I just emailed you with Admin access info, so you can create your own test page with our table, to investigate.
Thank you for this very useful plugin!
How can we easily move the horizontal scroll bar, from below to above the datatable?
The Visual composer plugin is also enabled. It would be ideal to just be able to put add a short code or css there, rather than change the php files.
Client requested this feature to make search result navigation more user friendly.
This is a very large datatable (with MANY columns and tall rows) with a lot of text, so the scrollbar under the table is usually not immediately visible, and people don't realize that they should scroll sideways to see the rest of the columns.
Focus groups have said the sideways scrolling navigation option of the datatable is not obvious enough, as is.
The live webpage... http://teachglobalimpact.org/main/all-classroom-resources/database/
Thank you for your time.
Hi Terry,
There is no standard way to do this. There is a fix but I am not sure if I recommend doing this because it relays on browser behaviour. Anyway here is a code that you can input in CustomCSS filed on Settings page:
div.wpDataTablesWrapper div.wdtscroll, div.wpDataTablesWrapper table { transform: rotateX(180deg); -ms-transform: rotateX(180deg); -webkit-transform: rotateX(180deg); }Thankyou Miljko,
Your code worked great on OSX 10,95 viewing with Chrome v. 53.0.
Unfortunately, the whole datatable disappeared when viewing with Safari Version 9.1.3
I had not yet implemented Milo's related functions.php fix to move the pagination row above the table (or duplicate). So I'll try and see if your browser dependent code works in combination.
Hi Terry,
I tested it in Safari 10 in my dev environment and it's working as you can see in the attachment. If you have tables that don't have scroll turned on maybe it is better to just add this code on page where you can tables with scrolling. Just add it between <style> tags in text tab of your page editor.
Thank you Miljko,
I appreciate your followup. The scroll bar showed up in my version of Safari too... but the problem was that the whole datatable content (grid lines and content inside) disappeared! It was fine in Chrome.
I think my customized datatable is more complicated and fragile than your example. I used the following CSS code you kindly gave me Aug 17 (ID: #21998):
#table_1 { width: 3500px! important; }
... It allows for horizontal scrolling while having a fixed width table. I put it in Visual Composer's Custom CSS, before I realized wpDataTable had a custom CSS area under Settings. However, it worked.
I was unable to thank you, because comments were closed on the old support system. So thank you for that! :)
Perhaps this is why Milo's recent code for a fix via function.php file also broke the table width limit (with horizontal scroll).
[] Now that you know this, can suggest a different fix?
[] Also, are you able to tell me how to stretch the search filters sidebar, and datatable, the full width of the page? (see attachment)
This would be a huge help, because my client has SO many columns. I didn't ask, because I thought that was only fixable through the Wordpress Theme AthenaPro customization... or MAYBE Visual Composer.
Hi Terry,
As I already mentioned this is more of a fix then proper solution for your request but there is no proper solution because scrollbar is under browser control and unfortunately we cannot do much about that.
I don't see any reason why this code doesn't work because -webkit-transform: is supported from Safari 9. It must be something else that preventing table from working normally.
As a full page width this is more of a question for theme developer. If you want us to do that for you it will require hiring one of our developers because work like this is not included in this support.
I understand, that we are dealing with fringe solution that will vary with each browser. If your solution didn't damage the table width limit in Safari, I would use it.
The wordpress theme vendor Athena-Pro, gave me the following CSS custom code for their bootstrap based theme, to stretch the width of your whole dataTable and sidebar search filter, to fit edge to edge in the browser window. It works in Chrome, but not Safari (but it didn't break it), so I can use it. I've not tested it with an iPad, but it's width is 768px, which matches the minimum width in the code below.
You could probably do a more thorough fix, but I offer this here, in case it is good enough for some people... I hope thats ok. Maybe it will eliminate some nuisance work for you! ;)
@media (min-width:768px) {
body.page-id-29 main#main > div.row {
max-width: 100%;
}
}
Hi Terry,
Thank you very much for sharing the solution. I'm sure that it will be helpful for other customers.
I still think that this CSS code should not break the table. Safari supports both CSS rules. Maybe you can apply this code and send me a link so I can take a look or give me temporary admin credentials so I can try it myself.
Hi Miljko,
I wish the CSS code you provided did not break the table width, but as you can see by the attached 2 screenshots:
• using Chrome, with perfect table with scrollbar above the datatable, and
• using Safari with NO table! (the table is there, because it occasionally flickers in view)
Is that a clue?
I did everything I could think of to eliminate any CSS interference. For example, I removed some curly quotes I found in the code, and otherwise cleaned it up. I did not replace my client's quotation marks (in text content), as it seems like Visual Composer (or Wordpress) converts it automatically. I also deactivated some unnecessary plugins to test.
The pg link is the same... http://teachglobalimpact.org/main/all-classroom-resources/database
I have to ask my client if it's ok to let you have admin access. It was no problem when I gave it to you on my own testing server.
Hi Terry,
Could you please try in Safari on another machine?
Please get back to me with account if they allow that.
Hi Miljko,
Thank you for your follow up. Sorry for my slow response. I've been sick and traveling so catching up on everything. I don't have easy access to another computer with Safari.
However, I just emailed you with Admin access info, so you can create your own test page with our table, to investigate.
thank you!
Terry
Hi Terry,
Problem is in you theme CSS file
http://teachglobalimpact.org/main/wp-content/themes/athena_pro/inc/css/bootstrap.css
and line
table { max-width: 100%; }which preventing my code from working normally. When you remove or comment this line you will see that table will start to work as expected.
I commented my CSS code on Settings page of our plugin.