Welcome, Guest
Username: Password: Remember me

TOPIC: Can you center-align sliders?

Can you center-align sliders? 10 months 4 weeks ago #101974

  • Tune
  • Tune's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 12
  • Karma: 0
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
The administrator has disabled public write access.

Can you center-align sliders? 10 months 4 weeks ago #101985

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4281
  • Thank you received: 807
  • Karma: 370
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.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.

Can you center-align sliders? 10 months 4 weeks ago #101987

  • Tune
  • Tune's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 12
  • Karma: 0
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:
The administrator has disabled public write access.

Can you center-align sliders? 10 months 4 weeks ago #101991

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4281
  • Thank you received: 807
  • Karma: 370
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:

Capture_2013-11-26.PNG
Cheers,
Tony Partner

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

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.
The following user(s) said Thank You: Tune

Can you center-align sliders? 10 months 4 weeks ago #102023

  • Tune
  • Tune's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 12
  • Karma: 0
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:

Capture_2013-11-26.PNG

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
The administrator has disabled public write access.

Can you center-align sliders? 10 months 4 weeks ago #102024

  • Tune
  • Tune's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 12
  • Karma: 0
The image didn't seem to get attached, so I'll do it again.
The administrator has disabled public write access.

Can you center-align sliders? 10 months 4 weeks ago #102027

  • Tune
  • Tune's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 12
  • Karma: 0
Hmmm, last try
Attachments:
The administrator has disabled public write access.

Can you center-align sliders? 10 months 4 weeks ago #102028

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4281
  • Thank you received: 807
  • Karma: 370
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.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.

Can you center-align sliders? 10 months 4 weeks ago #102029

  • Tune
  • Tune's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 12
  • Karma: 0
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?
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.133 seconds
Donation Image