Fixed issue #17548: If a slider is displayed vertically the position …

…of max value is wrong (#2081)
LimeSurvey · Oct 22, 2021 · b587ecc · b587ecc
1 parent 289e17d
commit b587ecc
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 3 deletions.
diff --git a/application/views/survey/questions/answer/multiplenumeric/rows/sliders/answer_row.twig b/application/views/survey/questions/answer/multiplenumeric/rows/sliders/answer_row.twig
@@ -39,7 +39,7 @@
                 <div class='col-xs-12 col-sm-2 slider-left text-right'>{{ sliderleft }}</div>
             {% endif %}
 
-            <div class="slider-container ls-input-group col-xs-12 col-sm-{{sliderWidth}}" id="answer{{myfname}}slid-container">
+            <div class="slider-container slider-{{slider_orientation}} ls-input-group col-xs-12 col-sm-{{sliderWidth}}" id="answer{{myfname}}slid-container">
                     {{ C.Html.textField( myfname ~ 'slid', dispVal ,{
                             'class': 'form-control answer-item numeric-item hidden',
                             'id' : "answer" ~ myfname ~ "slid", 
@@ -52,8 +52,10 @@
                         })
                     }}
                 {% if slider_showminmax %}
-                    <div class='pull-left help-block'> {{ slider_reversed == 'false' ? slider_min : slider_max}}</div>
-                    <div class='pull-right help-block'> {{ slider_reversed == 'false' ? slider_max : slider_min}}</div>
+                    <div class="slider-min-max-container">
+                        <div class='help-block slider-min-block'> {{ slider_reversed == 'false' ? slider_min : slider_max}}</div>
+                        <div class='help-block slider-max-block'> {{ slider_reversed == 'false' ? slider_max : slider_min}}</div>
+                    </div>
                 {% endif %}
                 {% if slider_reset %}
                     <div class="ls-input-group-extra ls-no-js-hidden ls-input-group-reset">

diff --git a/assets/packages/questions/numeric-slider/css/numeric-slider.css b/assets/packages/questions/numeric-slider/css/numeric-slider.css
@@ -49,3 +49,35 @@ font-family: FontAwesome;
   .ls-input-group-reset{position:relative;margin-top:0}
   .btn-slider-reset{top:-1em;margin-top:0}
 }
+
+.slider-vertical .slider-min-max-container {
+  display: inline-block;
+  vertical-align: top;
+  height: 210px;
+  position: relative;
+  padding-left: 0.5rem;
+}
+
+.slider-vertical .slider-min-block {
+  position: absolute;
+  top: 0;
+  margin-top: -10px;
+}
+
+.slider-vertical .slider-max-block {
+  position: absolute;
+  bottom: 0;
+  margin-bottom: -10px;
+}
+
+.slider-horizontal .slider-min-max-container {
+  width: 100%;
+}
+
+.slider-horizontal .slider-min-block {
+  float: left;
+}
+
+.slider-horizontal .slider-max-block {
+  float: right;
+}