Slider: Increase text width

3 months 1 week ago #231346 by gorp
Please help us help you and fill where relevant:
Your LimeSurvey version: Version 5.3.30+220808
Own server or LimeSurvey hosting: Own server
Survey theme/template: Fruity Theme ( fruity)

I have a Multiple numeric input question with slider option. Each side of the slider have text-answers. I am trying to increase the width for how that text is displayed

I have tried the Text input box width setting under Display (but nothing happens). 

(I have managed to left align the text. The separator that I use i | ) 

Any help is much appreciated. 
Thanks in advance. 

Please Log in to join the conversation.

2 months 2 weeks ago - 2 months 2 weeks ago #231975 by Pascal_RU
I would like to push this thread as I have the same problem (see picture below). I would like to broaden the space for texts left and right to the slider, which, I assume, can be achieved by reducing the width of the actual slider (the horizontal bar). I haven't found any options in LimeSurvey to do so, so I guess I will have to change or add something in the custom.css or theme.css or so.

I'd greatly appreciate any tips, hints or solutions! Thank you in advance. :-)


I'm using Version 3.7.2+180508, in case that's relevant/helpful.

I found part of the answer. You can add the width of the slider to your .slider-container in your custom.css file (see the theme-editor). It makes the slider-bar smaller. However, the text boxes aren't getting any wider for some reason. I guess their widths are not linked to the width of the slider-bar. So... Now I have to figure out how to increase their width above the 100% which are possible in LimeSurvey.

.slider-container {
margin-bottom: 0.5em;
margin-top: 0.5em;
  overflow: hidden;
  width: 10%;

Last edit: 2 months 2 weeks ago by Pascal_RU.

Please Log in to join the conversation.

2 months 2 weeks ago #231979 by tammo
Replied by tammo on topic Slider: Increase text width
I would rephrase the question, as it is a scale between internal and external factors.

So the scale itself could be from external to internal, all other text could be placed in the question itself or in help text.

Tammo ter Hark at Respondage
For Limesurvey reporting, education and customized themes

Please Log in to join the conversation.

2 months 2 weeks ago #231991 by tpartner
The element widths are controlled with Bootstrap classes .

Adding this script to the question source will equalize the widths of the left/right text and slider wrapper.

<script type="text/javascript" data-author="Tony Partner">
	$(document).on('ready pjax:scriptcomplete',function(){
		var thisQuestion = $('#question{QID}')
		// Modify some Bootstrap classes
		$('.slider-left.col-sm-2, .slider-right.col-sm-2', thisQuestion).removeClass('col-sm-2').addClass('col-sm-4');
		$('.slider-container', thisQuestion).removeClass('col-sm-8').addClass('col-sm-4');

Sample survey attached: 

File Attachment:

File Name: limesurvey...3293.lss
File Size:18 KB

Alternatively, you could add that JavaScript to your custom.js file or modify the core custom question theme.

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.

2 months 2 weeks ago #231996 by Pascal_RU
Thank you very much tammo and tpartner for your comments! I ended up with a solution I am quite happy with, i.e. your script tpartner combined with setting the Label Column Width on "hidden" in the "display" option menu of the question. Now, there are only three columns which indeed are of equal width.

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now