!
Best answer by PraDeepKotian_Ugam
View original
Spacing between slider and labels
+1
I am trying to decrease the space between the slider scale and the labels at each end, as there is a significant amount of space, which makes the relationship between the slider and the labels unclear to the respondent. Does anyone have any suggestions? Below is a screenshot of what the slider currently looks like for reference. Thanks.
!
!
Userlevel 6
+21
Hi @MauroUsabilitySci ,
To decrease the space between the slider and and the labels you can add below code in the custom css.
<style type="text/css">
.JFEScope .Skin .q-slider .statement-container { display: none; }
</style>
Note: Here I assume you are not considering any choice labels.
To decrease the space between the slider and and the labels you can add below code in the custom css.
<style type="text/css">
.JFEScope .Skin .q-slider .statement-container { display: none; }
</style>
Note: Here I assume you are not considering any choice labels.
+1
@PraDeepKotian_Ugam Thank you for your help! That code did work to decrease the spacing between the slider and the labels; however, now there is no spacing and the labels are overlapping the sliding scale (see image). Do you have any suggestions on how to create a small amount of space separating the labels and the axis?!
Userlevel 6
+21
> @MauroUsabilitySci said:
> @PraDeepKotian_Ugam Thank you for your help! That code did work to decrease the spacing between the slider and the labels; however, now there is no spacing and the labels are overlapping the sliding scale (see image). Do you have any suggestions on how to create a small amount of space separating the labels and the axis?!
>
.JFEScope .Skin .q-slider ul {
padding: 6px;
}
Add above code it will show some space between the slider and the labels
> @PraDeepKotian_Ugam Thank you for your help! That code did work to decrease the spacing between the slider and the labels; however, now there is no spacing and the labels are overlapping the sliding scale (see image). Do you have any suggestions on how to create a small amount of space separating the labels and the axis?!
>
.JFEScope .Skin .q-slider ul {
padding: 6px;
}
Add above code it will show some space between the slider and the labels
Hello - I have a similar challenge but the code did not seem to fix my issue. I am working with a custom built bow tie slider that someone shared with me. I would like to bring the "choice" closer to the bow tie slider and add a little padding between the labels and the bow tie because when the choice bleeds onto a second line, the bow tie overlaps with the labels. Any suggestions? Thanks so much!!
Thanks for the suggestions... Doing anything to the CSS for slider questions removes the "force response" capability. People can just breeze through the survey and no responses are saved.
Perhaps the Qualtrics team can dedicate more time to this issue. I have seen multiple requests on the topic, e.g. reduce the distance between the questions, the distance between the labels and the questions, between the slider and the labels, etc.
Leave a Reply
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.