Slider labels: How to move from top to side or remove | XM Community
Question

Slider labels: How to move from top to side or remove

  • 3 November 2023
  • 3 replies
  • 299 views

Userlevel 2
Badge +4
  • Level 2 ●●
  • 25 replies

Hi! I have two different questions about position in slider questions: moving labels from above the bar to the left side of the bar side with the slider/slider type, and changing position with the star type. 

Slider label from top to side:

In the editor when you’re setting up a slider question, the labels are to the left, like this:

 

 

But on the front end they go full width and move the label to above the left side of the slider, like this:

This has proven confusing for people, as once they can’t see the top line they revert to normal labeling patterns and think of them like a caption, where the word below is a label for the thing above. Is there a way I reduce the width of the slider/scale so the labels are even with the bar on the left side, positioned more like in the editor?

 

In another question I have a slider in the star format. By default it gets positioned like this:

I would like to ditch the label and move the stars to align with the left margin so they appear directly under the question. I tried putting spaces and/or a white punctuation mark in the label instead of words, but the positioning stayed the same. I also tried using an image of the show instead of a label but it made it feel even clunkier. Is there a way to shift the stars left and get rid of the label (statement) or at least minimize the width of the label? Any tips on how to make that extra large white space between question and star slider also welcome (I checked and it’s not coming from an extra line in the question field). 

 

Thanks!

 

 


3 replies

Userlevel 2
Badge +4

I got some help from a friend on the first one. He added this CSS (Look & Feel menu > Style > in the Custom CSS box):

 

#QID8 .q-slider .labels-container { width: 75%; margin-left: 23%;}

#QID8 .q-slider .slider-container { clear: both; padding-top: 20px; }
#QID8 .q-slider .slider-container .statement-container { width: 20%; float: left; padding: 5px 0; margin-right: 3%; }
#QID8 .q-slider .slider-container .Slider { width: 75%; float: left; }
 

It works perfectly! (Looks a bit wonky on mobile, but still usable.)

Userlevel 2
Badge +4

And I finally found an old thread that was was answered by @TomG and was close enough to what I wanted. Pasting here in  case anyone else is looking. 

jQuery("#"+this.questionId+" tr").each(function() {
var row = jQuery(this);
var th = row.before("<tr></tr>").find("th").attr("colspan","4").css("text-align","left");
row.prev("tr").append(th);
 

Badge +1

@jinx This looks good. Where should I paste it, exactly?

Leave a Reply