diff --git a/docs/gentelella/build/css/custom.css b/docs/gentelella/build/css/custom.css index 7afdf20ebf8..4e182cccb90 100644 --- a/docs/gentelella/build/css/custom.css +++ b/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; - } \ No newline at end of file +.chartWithSlider { + display: flex; + flex-wrap: nowrap; + flex-direction: row; +} + +.chartWithSlider .chart { + flex: 95%; +} + +.chartWithSlider .slider { + flex: 5%; +} \ No newline at end of file diff --git a/docs/intensivstationen.html b/docs/intensivstationen.html index d8a56a197fc..7516e9ead8c 100644 --- a/docs/intensivstationen.html +++ b/docs/intensivstationen.html @@ -104,14 +104,13 @@
-
-
+
+
-
+
-
diff --git a/docs/intensivstationen.js b/docs/intensivstationen.js index a2e97d7ea5f..99446afff2a 100644 --- a/docs/intensivstationen.js +++ b/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; }