From 24d8ebebf3299dff775ee412b40c934dc921edcf Mon Sep 17 00:00:00 2001
From: Norbert Renner <norbert.renner@gmx.de>
Date: Fri, 9 Mar 2018 10:46:41 +0100
Subject: [PATCH] Fix DataTables horizontal scrolling (scrollX) in sidebar
 (flex row)

- remove Bootstrap "table" class, "width: 100%" prevents scrolling,
  not needed anyway (?), seems to have no effects otherwise
- override margin auto with 0 to avoid table taking more space at
  margins than needed and getting misaligned (centered and header left)
  see also https://github.com/DataTables/DataTables/issues/539
- refactoring: use classes instead of ids
---
 css/style.css | 11 ++++++++---
 index.html    |  2 +-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/css/style.css b/css/style.css
index 85f804d..703f4ef 100644
--- a/css/style.css
+++ b/css/style.css
@@ -12,7 +12,7 @@ body, #content {
 
 .flexcolumn,
 .leaflet-sidebar-pane.active,
-#datatable_wrapper,
+.dataTables_wrapper,
 .dataTables_scroll,
 .dataTables_scrollBody {
     display: -webkit-box;
@@ -43,10 +43,10 @@ body, #content {
 }
 
 /* 'auto' (1 1 auto) instead of '1' (1 1 0) needed for DataTables tab in Firefox */
-#datatable_wrapper,
+.dataTables_wrapper,
 .dataTables_scroll,
 .dataTables_scrollBody,
-#datatable {
+table.dataTable {
     -webkit-box-flex: auto;
     -moz-box-flex: auto;
     -webkit-flex: auto;
@@ -225,6 +225,11 @@ https://css-tricks.com/svg-line-animation-works/
 * DataTables
 */
 
+table.dataTable {
+    /* avoid getting centered and header misaligned with flex row (sidebar) */
+    margin: 0;
+}
+
 table.dataTable.mini thead th,
 table.dataTable.mini thead td {
     padding: 3px 13px 3px 2px;
diff --git a/index.html b/index.html
index 25dc7dc..023205e 100644
--- a/index.html
+++ b/index.html
@@ -206,7 +206,7 @@
 
                     <div class="leaflet-sidebar-pane" id="tab_data">
                         <h1 class="leaflet-sidebar-header">Data<span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span></h1>
-                        <table id="datatable" class="table mini cell-border hover stripe"></table>
+                        <table id="datatable" class="mini cell-border hover stripe"></table>
                     </div>
 
                     <div class="leaflet-sidebar-pane" id="tab_itinerary">