Placement of choice label for the slider question | XM Community
Skip to main content
Hello,



I wanted to produce the following in my survey:



!



and @Shashi has been really kind in providing me with the CSS code for this, which was:

ul.numbers li::after { content:",000"; }

ul.numbers li:nth-child(4):after { content:""; }



The code worked (with mobile-friendly option box ticked):



!



However, the choice label was placed below all the response options. Wonder whether anyone be able to please explain: (1) how to place the choice label (i.e., "adjustment") in line with the response options and (2) why the code will only work for the mobile-friendly option (i.e., why the ",000" disappeared when it was unticked)?



Thank you very much in advance!
Hello @Estha



Paste the following code in the js(OnLoad) of the slider question



jQuery("ul").css({"padding-left":"80px"});

jQuery(".LabelWrapper > label").hide();

jQuery("#"+this.questionId+" table > tbody > tr > td:eq(0) ").html("Adjustment");



Also, Paste the following code in the "Add custom css" option:



.track{

width:100% !important

}
Hello @Estha,



Also, Paste the following code in the "Add custom css" option:



.track{

width:100% !important

}
Hi @Shashi,



Thank you! I copied and pasted the first set of codes onto the add JavaScript codes in the question, and the second code onto the "add custom css" option in the Look and Feel tab of Qualtrics.



Unfortunately, I ended up with the following after pasting all those codes:



!



I am not sure what has happened ... but will thank you in advance for any assistance that you can provide!
> @Estha said:

> Hi @Shashi,

>

> Thank you! I copied and pasted the first set of codes onto the add JavaScript codes in the question, and the second code onto the "add custom css" option in the Look and Feel tab of Qualtrics.

>

> Unfortunately, I ended up with the following after pasting all those codes:

>

> !

>

> I am not sure what has happened ... but will thank you in advance for any assistance that you can provide!



Hello @Estha ,



Use following code in the js of the question.



jQuery("ul").css({"padding-left":"80px"});

jQuery(".LabelWrapper > label").hide();

jQuery("#"+this.questionId+" table > tbody > tr > td:eq(0) ").html("Adjustment");
Hi @Shashi,



Unfortunately it still is not working .... in the process of adjusting the scale, the question somehow disappeared as well ....



!



I think I will simply revert back to the default formatting, but uses the css code that you have kindly provided to show the ',000' in the options. I am wondering, though, whether it will be possible to ensure that the ',000' appears in the 'show value' options as well? At the present, the value shown (i.e., the bubble that pops up to show where the chosen value is) does not reflect the ',000' code.



Thank you for your kind help, and your patience! I definitely appreciate it.
> @Shashi said:

> > @Estha said:

> > Hi @Shashi,

> >

> > Thank you! I copied and pasted the first set of codes onto the add JavaScript codes in the question, and the second code onto the "add custom css" option in the Look and Feel tab of Qualtrics.

> >

> > Unfortunately, I ended up with the following after pasting all those codes:

> >

> > !

> >

> > I am not sure what has happened ... but will thank you in advance for any assistance that you can provide!

>

> Hello @Estha ,

>

> Use following code in the js of the question.

>

> jQuery("ul").css({"padding-left":"80px"});

> jQuery(".LabelWrapper > label").hide();

> jQuery("#"+this.questionId+" table > tbody > tr > td:eq(0) ").html("Adjustment");

> Also, Paste the following code in the "Add custom css" option:

.track{

width:100% !important

}



Output:



!

OR

!

Leave a Reply


Terms & Conditions