fix scroll & visible remove button

dist/css/doodle.css

@@ -12,8 +12,13 @@
     font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
 }
 
+.specific-doodle {
+    overflow-x: scroll;
+    padding: 0 70px;
+}
+
 .table-responsive {
-    overflow-x: auto;
+    overflow-x: visible;
 }
 
 .doodle-table thead tr th, .doodle-table tbody tr td {
@@ -329,6 +334,18 @@
     transition: width 300ms 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
 }
 
+.doodle-table .remove-date {
+    color: #fa5366;
+    padding: 8px;
+    margin-right: 10px;
+}
+
+.doodle-table .remove-date:hover {
+    background-color: rgba(250, 83, 102, 0.2);
+    cursor: pointer;
+    border-radius: 3px;
+}
+
 /*******************************************************
  ***********************END INPUT***********************
  *******************************************************/

dist/js/doodle.js

@@ -801,7 +801,6 @@
          */
         this.eventAddDate = (e) => {
             e.stopImmediatePropagation();
-            //Force la fermeture du datePicker
             $('#myDatepicker').datepicker('hide');
 
             let formatDateOnSneFou = moment(e.date).locale('fr').format(this.dateFormat);

test/index.html

@@ -6,7 +6,7 @@
     <title>Jumbotron Template for Bootstrap</title>
 
     <!-- Bootstrap core CSS -->
-    <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css">
+    <link rel="stylesheet" href="/doodleV2/node_modules/bootstrap/dist/css/bootstrap.css">
 
     <!-- Custom styles for this template -->
     <link href="/doodleV2/test/css/starter-template.css" rel="stylesheet">
@@ -23,8 +23,10 @@
     <!-- Example row of columns -->
     <div class="row">
         <div class="col-md-12">
-            <div class="doodle table-responsive" data-json='{"29/07/2019":["11","12:15","13"],"30/07/2019":["11","12:15","13"],"31/07/2019":["11","12:15","13"],"01/08/2019":["13","12:15","11"],"02/08/2019":["11","12:15","13"]}' ></div>
-            <input type="hidden" id="inputVal" value=''>
+            <div class="specific-doodle">
+                <div class="doodle table-responsive" data-json='{"29/07/2019":["11","12:15","13"],"30/07/2019":["11","12:15","13"],"31/07/2019":["11","12:15","13"],"01/08/2019":["13","12:15","11"],"02/08/2019":["11","12:15","13"]}' ></div>
+                <input type="hidden" id="inputVal" value=''>
+            </div>
 
             <!--<div class="doodle table-responsive" data-json="json/data.json"></div>
             <input type="hidden" id="inputVal" value='' />-->

test/js/app.js

 $( document ).ready(function() {
     $('.doodle').Doodle({
-        editMode: false,
+        editMode: true,
         vertical: true,
         inputSelector: '#inputVal'
     });