Multiple numerical input - tweaking -designing questions, subquestion and slider

More
3 years 4 months ago #107665 by csurvey2
csurvey2 created the topic: Multiple numerical input - tweaking -designing questions, subquestion and slider
Hi all,

I want to tweak the formatting of a survey made of several sliders :

Each slider has a text above (the question text), and i would like to shorten the distance between the text and the slider.

Each slider has a text (a subquestion sentence) on the left and on the right, i would like to correctly justify or center this text too, to be pretty the same each side of the slider.

And i would like to be able to center the "whole" (slider with the question text and the sub questions on the left and on the right) on the main page.

Finally i would like to shorten the distance between each sliders....

I made some tweaking about the slider itself with help on the forum and exploring in firebug to change the CSS (disabling the call out, fixing the size of the slider...), but this time i do not figure the file and the section to edit to do the work.

Many thanks by advance for your help;

Best,
Chris

Please Log in to join the conversation.

More
3 years 3 months ago #107687 by DenisChenu
DenisChenu replied the topic: Multiple numerical input - tweaking -designing questions, subquestion and slider
Need:

A exemple page + an mockup

Because hard to understand what you want.

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .

Please Log in to join the conversation.

More
3 years 3 months ago - 3 years 3 months ago #107694 by csurvey2
csurvey2 replied the topic: Multiple numerical input - tweaking -designing questions, subquestion and slider


Hi Dennis,
Sorry for not being clear.
Here attached a draft example (i just have my phone at hand).
Many thanks for your help.
Best,
Chris.
Attachments:
Last Edit: 3 years 3 months ago by csurvey2.

Please Log in to join the conversation.

More
3 years 3 months ago #107721 by tpartner
tpartner replied the topic: Multiple numerical input - tweaking -designing questions, subquestion and slider
All of this can be done in template.css but the details would vary depending on the template you are using.


.

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 3 months ago #107730 by csurvey2
csurvey2 replied the topic: Multiple numerical input - tweaking -designing questions, subquestion and slider
Hi Tpartner; thanks for your help.
Actually i use the Basic template.
I found the lefttext and righttext css section in template.css but had bad time to tweak as i want.
Harder for me to center the whole slider and the distance beetween the question and the slider.
Maby thanks.
Best,
Chris.

Please Log in to join the conversation.

More
3 years 3 months ago #107731 by tpartner
tpartner replied the topic: Multiple numerical input - tweaking -designing questions, subquestion and slider
Can you activate a test survey for us to see?

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 3 months ago #107735 by csurvey2
csurvey2 replied the topic: Multiple numerical input - tweaking -designing questions, subquestion and slider
Sorry,
I operate on localhost with Mamp and dont have now my computer at hand. Wich informations do you need i could drop when getting back?
Thanks,
Chris.

Please Log in to join the conversation.

More
3 years 3 months ago #107737 by tpartner
tpartner replied the topic: Multiple numerical input - tweaking -designing questions, subquestion and slider
I would need to see the source and styles that are applied. That would only work from a public server.

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 3 months ago #107943 by csurvey2
csurvey2 replied the topic: Multiple numerical input - tweaking -designing questions, subquestion and slider
Hi Tony, i just made an example on the lime service Demo www.LimeSurvey Professional (previously LimeService).com/en/online-Demo
my survey is named : test slidercc and the copy of the basic template edited for this file is testslidercc.

I have edited the td of the question in order to blank the background of the cell, hide the red asterisk and the border of the cell. I just turned the css in "quote"; So only appears the question text (question 1) and the slider with the two separated questions. Perhaps not a good way as the cell remains.
I would like to center the slider (i modified the width) with the left and right text. adjust this two text, and diminishes the space between the question (question 1) and the slider and between the two sliders (question 1) and question 2.
Many thanks for your help. Best, Chris

Please Log in to join the conversation.

More
3 years 3 months ago - 3 years 3 months ago #107948 by tpartner
tpartner replied the topic: Multiple numerical input - tweaking -designing questions, subquestion and slider
I would add something like this to the end of template.css (of course, the questions IDs will be different in your live survey).

This will also make it more or less responsive to screen size.
#question390  {
	margin-top: -30px;
}
 
#question48 h2,
#question390 h2 {
	margin: 0 0 -25px 0;
}
 
#question48 .slider-label,
#question390 .slider-label,
#question48 .survey-question-help,
#question390 .survey-question-help {
	display: none;
}
 
#question48 .subquestions-list,
#question390 .subquestions-list {
	margin: 0;
	width: 100% !important;
}
 
.numeric-multi div.multinum-slider {
	float: none;
}
 
.ui-slider-1 {
	margin: 0 auto 20px auto;
	width: 100%;
	max-width: 600px;
}
 
.slider_lefttext,
.slider_righttext {
    width: 25%;
}
 
.slider_lefttext {
    padding-right: 20px;
}
 
.slider_righttext {
    padding-left: 20px;
}


Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last Edit: 3 years 3 months ago by tpartner.

Please Log in to join the conversation.

More
3 years 3 months ago - 3 years 3 months ago #107949 by tpartner
tpartner replied the topic: Multiple numerical input - tweaking -designing questions, subquestion and slider
One small tweak to force the <ul> elements to full width:

#question390  {
	margin-top: -30px;
}
 
#question48 h2,
#question390 h2 {
	margin: 0 0 -25px 0;
}
 
#question48 .slider-label,
#question390 .slider-label,
#question48 .survey-question-help,
#question390 .survey-question-help {
	display: none;
}
 
#question48 .subquestions-list,
#question390 .subquestions-list {
	margin: 0;
	width: 100% !important;
}
 
.numeric-multi div.multinum-slider {
	float: none;
}
 
.ui-slider-1 {
	margin: 0 auto 20px auto;
	width: 100%;
	max-width: 600px;
}
 
.slider_lefttext,
.slider_righttext {
    width: 25%;
}
 
.slider_lefttext {
    padding-right: 20px;
}
 
.slider_righttext {
    padding-left: 20px;
}

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last Edit: 3 years 3 months ago by tpartner.

Please Log in to join the conversation.

More
3 years 3 months ago #107963 by csurvey2
csurvey2 replied the topic: Multiple numerical input - tweaking -designing questions, subquestion and slider
Hi Tony,
many many thanks, it works !!!

I have an other concern, i have also, a slightly different format with a sub-text under Question 1 and Question 2; in editing like above the sub-text is compressed on the Question (example question 2) on www.LimeSurvey Professional (previously LimeService).com/en/online-Demo test slidercc.

I also have a caption above the slider, and i would diminish the space but don't figure how to do that.
Many thanks again,
Best,
Christophe.

Please Log in to join the conversation.

More
3 years 3 months ago #107966 by tpartner
tpartner replied the topic: Multiple numerical input - tweaking -designing questions, subquestion and slider
I'm sorry, I don't have time to provide styles for every possible question configuration. I would suggest a tool like Firebug for Firefox to explore the associated elements and styles.


.

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 3 months ago #107967 by csurvey2
csurvey2 replied the topic: Multiple numerical input - tweaking -designing questions, subquestion and slider
Hi Tony,
Sorry for that. Many thanks for your great help.
I use firebug but have some bad time in testing the tweaking.
Best,
Chris.

Please Log in to join the conversation.

Did you already participate in our customer survey?

Don't miss your chance for great prices.

Please click here to participate:

Start now

Start now!

Just create your account and start using Limesurvey today.

Register now