styling chart with slider

docs/gentelella/build/css/custom.css

@@ -4905,6 +4905,16 @@ table thead .checkbox.radio { margin-top:-7px;margin-top:-21px; }
     /*prevent datatables overflowing its container*/
 }
 
-.noUi-target {
-    height: 300px;
-  }
+.chartWithSlider {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+}
+
+.chartWithSlider .chart {
+    flex: 95%;
+}
+
+.chartWithSlider .slider {
+    flex: 5%;
+}

docs/intensivstationen.html

@@ -112,14 +112,13 @@
                   <div class="clearfix"></div>
                 </div>
                 <div class="x_content">
-                  <div class="row">
-                    <div class="col-xs-11">
+                  <div class="chartWithSlider">
+                    <div class="chart">
                       <canvas id="medianOfFreeBedsByKreis"></canvas>
                     </div>
-                    <div class="col-xs-1">
+                    <div class="slider">
                       <div id="slider"></div>
                     </div>
-                    <div class="clearfix"></div>
                   </div>
                 </div>
               </div>

docs/intensivstationen.js

@@ -61,10 +61,11 @@ function _displayMedianOfFreeBedsByKreisChart(canvas, sliderElement, data) {
             min: 0,
             max: data.length - 1
         },
+        canvas.style.height,
         ([start, end]) => medianOfFreeBedsByKreisChartView.setData(data.slice(start, end + 1)));
 }
 
-function createSlider(sliderElement, range, onUpdate) {
+function createSlider(sliderElement, range, height, onUpdate) {
     noUiSlider.create(
         sliderElement,
         {
@@ -75,4 +76,5 @@ function createSlider(sliderElement, range, onUpdate) {
             orientation: 'vertical'
         });
     sliderElement.noUiSlider.on('update', onUpdate);
+    sliderElement.style.height = height;
 }