Merge pull request #455 from contactashish13/issue-424-1

DataTables: Scrolling doesn't work properly

Author: contactashish13

classes/Visualizer/Render/Sidebar/Type/DataTable/DataTable.php

@@ -190,12 +190,24 @@ protected function _renderTableSettings() {
 
 				echo '<div class="viz-section-delimiter section-delimiter"></div>';
 
+				self::_renderTextItem(
+					esc_html__( 'Table Height', 'visualizer' ),
+					'scrollY_int',
+					isset( $this->scrollY_int ) ? $this->scrollY_int : '',
+					esc_html__( 'Height of the table in pixels (the table will show a scrollbar).', 'visualizer' ),
+					'',
+					'number',
+					array(
+						'min' => 0,
+					)
+				);
+
 				self::_renderCheckboxItem(
-					esc_html__( 'Scroll Collapse', 'visualizer' ),
-					'scrollCollapse_bool',
-					$this->scrollCollapse_bool,
+					esc_html__( 'Enable Horizontal Scrolling', 'visualizer' ),
+					'scrollX',
+					$this->scrollX,
 					'true',
-					esc_html__( 'Allow the table to reduce in height when a limited number of rows are shown', 'visualizer' )
+					esc_html__( 'To disable wrapping of columns and enabling horizontal scrolling.', 'visualizer' )
 				);
 
 				echo '<div class="viz-section-delimiter section-delimiter"></div>';

css/library.css

@@ -292,10 +292,6 @@ button.media-modal-close {
 	display: none !important;
 }
 
-.dataTables_scrollBody {
-	overflow: hidden !important;
-}
-
 .dataTables_wrapper {
     max-height: 300px;
     overflow: hidden !important;

js/render-datatables.js

@@ -29,8 +29,7 @@
         if($('#' + id).find('table.visualizer-data-table').length > 0){
             $('#' + id).empty();
         }
-        $('#' + id).append($('<table class="dataTable visualizer-data-table table table-striped"></table>'));
-
+        
         settings = {
             destroy: true,
             paging: false,
@@ -48,23 +47,40 @@
             dom: 'Bfrtip',
         };
 
+        var $classes = 'dataTable visualizer-data-table table table-striped';
+
         if(typeof v.page_type !== 'undefined'){
             switch(v.page_type){
                 case 'post':
+                    // fall-through.
                 case 'library':
+                    // remove scrollY if its greater than what will fit in the box (along with the legend).
+                    if(parseInt(chart.settings['scrollY_int']) > 180){
+                        chart.settings['scrollY_int'];
+                    }
+                    delete chart.settings['scrollX'];
                     $.extend( settings, { 
                             scrollX: 150,
                             scrollY: 180,
-                            scrollCollapse: true
                     } );
                     break;
-                case 'frontend':
                 case 'chart':
+                    delete chart.settings['scrollX']; // jshint ignore:line
+                    // fall-through.
+                case 'frontend':
                     // empty.
                     break;
             }
         }
 
+        if(typeof chart.settings['scrollX'] !== 'undefined'){
+            if(chart.settings['scrollX'] == 'true'){ // jshint ignore:line
+                $classes = $classes + ' nowrap';
+            }
+        }
+
+        $('#' + id).append($('<table class="' + $classes + '"></table>'));
+
         var select = {
             info: false
         };