From 21fc0e35c7c48d519855466ea895097c14bca97b Mon Sep 17 00:00:00 2001
From: Hubert Nusser <hubsif@gmx.de>
Date: Thu, 25 Mar 2021 21:24:23 +0100
Subject: [PATCH] recalculate oh-slider when rendered, fixes #967

Signed-off-by: Hubert Nusser <hubsif@gmx.de>
---
 .../web/src/components/widgets/system/oh-slider.vue      | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/bundles/org.openhab.ui/web/src/components/widgets/system/oh-slider.vue b/bundles/org.openhab.ui/web/src/components/widgets/system/oh-slider.vue
index f9a3d4e40b..387d7dddb5 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/system/oh-slider.vue
+++ b/bundles/org.openhab.ui/web/src/components/widgets/system/oh-slider.vue
@@ -1,5 +1,5 @@
 <template>
-  <f7-range class="oh-slider" v-bind="config" :value="value" @range:changed="onChange" :format-label="formatLabel" :format-scale-label="formatScaleLabel" />
+  <f7-range ref="rangeslider" class="oh-slider" v-bind="config" :value="value" @range:changed="onChange" :format-label="formatLabel" :format-scale-label="formatScaleLabel" />
 </template>
 
 <style lang="stylus">
@@ -17,6 +17,13 @@ export default {
   widget: OhSliderDefinition,
   mounted () {
     delete this.config.value
+
+    // f7-range inside of masonry can get rendered faulty, as the masonry changes its breakpoint layout after being rendered
+    // re-calculate the range slider after masonry is updated
+    setTimeout(() => {
+      this.$refs.rangeslider.f7Range.calcSize()
+      this.$refs.rangeslider.f7Range.layout()
+    }, 0)
   },
   computed: {
     value () {