Check out the LimeSurvey source code on GitHub!

Can you center-align sliders?

More
3 years 1 month ago #101974 by Tune
Hi!

I'd like to use some slider questions in a survey. Is it possible to have the slider center-aligned instead of left-aligned? If it is, how do you do it? =)

Best
/Mikael

Please Log in to join the conversation.

More
3 years 1 month ago #101985 by tpartner
What template are you using?

Can you give us a screenshot/mockup of what you need?

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

More
3 years 1 month ago #101987 by Tune
Sorry I forgot to mention that I'm using Limesurvey hosted by www.limeservice.com and the version is 2.00+

I'm currently using the default template. What I want to do is edit the template so that the slider in a multiple-numeric-question is centered instead of left-aligned. I'm attaching a illustrative picture of how I want my question to look like.

Thanks
Attachments:

Please Log in to join the conversation.

More
3 years 1 month ago #101991 by tpartner
Create a copy of that template and add something like this to the end of template.css:
.numeric-multi .answer ul {
	width: 100%;
}
 
.numeric-multi label.slider-label {
	width: 20% !important;
}
 
.numeric-multi div.multinum-slider {
	width: 80%;
}
 
div.ui-slider {
	margin: 0 auto 20px auto;
}

That should give you this:


Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
The following user(s) said Thank You: Tune

Please Log in to join the conversation.

More
3 years 1 month ago #102023 by Tune

tpartner wrote: Create a copy of that template and add something like this to the end of template.css:

.numeric-multi .answer ul {
	width: 100%;
}
 
.numeric-multi label.slider-label {
	width: 20% !important;
}
 
.numeric-multi div.multinum-slider {
	width: 80%;
}
 
div.ui-slider {
	margin: 0 auto 20px auto;
}

That should give you this:


Thanks for the reply! But the slider is not completely centered. I've attached an image of how it looks. Is it possible to make it completely centered? It is important in my survey that there will be no bias toward the left or right image.

Best
/Mikael

Please Log in to join the conversation.

More
3 years 1 month ago #102024 by Tune
The image didn't seem to get attached, so I'll do it again.

Please Log in to join the conversation.

More
3 years 1 month ago #102027 by Tune
Hmmm, last try
Attachments:

Please Log in to join the conversation.

More
3 years 1 month ago #102028 by tpartner
Adjust the widths of the .slider-label and .multinum-slider elements (they should be <= 100).

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

More
3 years 1 month ago #102029 by Tune

tpartner wrote: Adjust the widths of the .slider-label and .multinum-slider elements (they should be <= 100).


I've tried many different combinations of the widths but it seems to have no effect at all. Do I need to add something else?

Please Log in to join the conversation.

Imprint                   Privacy policy         General Terms & Conditions         Revocation information and revocation form