- Posts: 24
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Slider: Increase text width
- gorp
- Topic Author
- Offline
- Junior Member
Less
More
1 year 8 months ago #231346
by gorp
Slider: Increase text width was created 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.
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.
- Pascal_RU
- Offline
- New Member
Less
More
- Posts: 11
- Thank you received: 0
1 year 7 months ago - 1 year 7 months ago #231975
by Pascal_RU
Replied by Pascal_RU on topic Slider: Increase text width
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.
Best,
Pascal
I'm using Version 3.7.2+180508, in case that's relevant/helpful.
Edit:
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%;
}
I'd greatly appreciate any tips, hints or solutions! Thank you in advance.
Best,
Pascal
I'm using Version 3.7.2+180508, in case that's relevant/helpful.
Edit:
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%;
}
Attachments:
Last edit: 1 year 7 months ago by Pascal_RU.
Please Log in to join the conversation.
- tammo
- Offline
- Official LimeSurvey Partner
Less
More
- Posts: 966
- Thank you received: 219
1 year 7 months ago #231979
by tammo
Tammo ter Hark at Respondage
For Limesurvey reporting, education and customized themes
respondage.nl
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.
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
respondage.nl
Please Log in to join the conversation.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10103
- Thank you received: 3591
1 year 7 months ago #231991
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Slider: Increase text width
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.
Sample survey attached:
Alternatively, you could add that JavaScript to your custom.js file or modify the core custom question theme.
Adding this script to the question source will equalize the widths of the left/right text and slider wrapper.
Code:
<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'); }); </script>
Sample survey attached:
Alternatively, you could add that JavaScript to your custom.js file or modify the core custom question theme.
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.
- Pascal_RU
- Offline
- New Member
Less
More
- Posts: 11
- Thank you received: 0
1 year 7 months ago #231996
by Pascal_RU
Replied by Pascal_RU on topic Slider: Increase text width
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.
Thanks!
Thanks!
Please Log in to join the conversation.