question and question answers on same line/row for List (radio) q-type

More
3 years 1 month ago #132412 by honorem
I'd like to have the question answers on the same row as the question itself, tdpartner has done this a couple years ago for a question of type 'short answer' but the solution does not seem to apply in my case. Has been posted here in answer #97286 .
I would also like to increase the width between the columns of the answers of "Yes", "No", "Don't know"


Attachments:

Please Log in or Create an account to join the conversation.

LimeSurvey Partners
More
3 years 1 month ago #132413 by Ben_V
you can adapt (elements, classes) something starting from:
(paste this js code in the group description or in your first question help area;)
<script type="text/javascript">
$(function(){
 $( "<style type='text/css' media='screen and (min-width:481px)'>"
 	+ ".answers-wrapper li { display:inline;padding-right:20px !important; }"
	+"</style>").appendTo( "head" );
 });
</script>

Benoît

EM Variables => bit.ly/1TKQyNu | EM Roadmap => bit.ly/1UTrOB4
Last Releases => 2.6x.x goo.gl/ztWfIV | 2.06/2.6.x => bit.ly/1Qv44A1
Demo Surveys => goo.gl/HuR6Xe (already included in /docs/demosurveys)

Please Log in or Create an account to join the conversation.

More
3 years 1 month ago - 3 years 1 month ago #132418 by honorem

Ben_V wrote: you can adapt (elements, classes) something starting from:
(paste this js code in the group description or in your first question help area;)

<script type="text/javascript">
$(function(){
 $( "<style type='text/css' media='screen and (min-width:481px)'>"
 	+ ".answers-wrapper li { display:inline;padding-right:20px !important; }"
	+"</style>").appendTo( "head" );
 });
</script>


Thanks for your reply, do I have to do any CSS styling or is the CSS style embedded in the java? because simply using your script in my question box does not work, and the javascript should be enabled because i'm using another javascript in another question which works fine. I'm btw using some deafult template
Last edit: 3 years 1 month ago by honorem.

Please Log in or Create an account to join the conversation.

More
3 years 1 month ago - 3 years 1 month ago #132419 by Ben_V
Probably this does not work because css classes are wrong and you have to adapt this part:
.answers-wrapper li...

Make a test with only the <li> element and find a working class to affect only radio buttons question type..
If you can't... give us a link to an activated survey
<script type="text/javascript">
$(function(){
 $( "<style type='text/css' media='screen and (min-width:481px)'>"
  + ".list-radio li, td.answer li label{ text-align:left !important; display:inline !important; }"
  + ".list-radio li { padding-right:20px !important }"
  +"</style>").appendTo( "head" );
});
</script>

Benoît

EM Variables => bit.ly/1TKQyNu | EM Roadmap => bit.ly/1UTrOB4
Last Releases => 2.6x.x goo.gl/ztWfIV | 2.06/2.6.x => bit.ly/1Qv44A1
Demo Surveys => goo.gl/HuR6Xe (already included in /docs/demosurveys)
Attachments:
Last edit: 3 years 1 month ago by Ben_V.
The following user(s) said Thank You: honorem

Please Log in or Create an account to join the conversation.

More
3 years 1 month ago #132421 by tammo
And take care: a single line may be too long for people that answer your survey on a tablet/mobile phone....


Tammo ter Hark at Tools for Research
Proud developers of the TFR Responsive Limesurvey template
toolsforresearch.com/limesurvey-responsive-template

Please Log in or Create an account to join the conversation.

More
3 years 1 month ago - 3 years 1 month ago #132422 by Ben_V

tammo wrote: And take care: a single line may be too long for people that answer your survey on a tablet/mobile phone....


That's why the code includes media query statement...
<style type='text/css' media='screen and (min-width:481px)'>
<script type="text/javascript">
$(function(){
 $( "<style type='text/css' media='screen and (min-width:481px)'>"
  + ".list-radio li, td.answer li label{ text-align:left !important; display:inline !important; }"
  + ".list-radio li { padding-right:20px !important }"
  +"</style>").appendTo( "head" );
});
</script>

Benoît

EM Variables => bit.ly/1TKQyNu | EM Roadmap => bit.ly/1UTrOB4
Last Releases => 2.6x.x goo.gl/ztWfIV | 2.06/2.6.x => bit.ly/1Qv44A1
Demo Surveys => goo.gl/HuR6Xe (already included in /docs/demosurveys)
Last edit: 3 years 1 month ago by Ben_V.

Please Log in or Create an account to join the conversation.

More
3 years 1 month ago #132425 by tpartner
Nice workaround Ben but one note - that will affect all list-radios on a page.

If you want to target single questions, you could add something like this to the questions source:
<script type="text/javascript" charset="utf-8">		
	$(document).ready(function(){ 
		$('#question{QID}').addClass('with-inline-anwers');
    });
</script>

And then add something like this to template.css:
@media screen and (min-width:481px) {
	.list-radio.with-inline-anwers li.answer-item, 
	.list-radio.with-inline-anwers label.answertext { 
		text-align:left !important; 
		display:inline !important; 
	}
 
	.list-radio.with-inline-anwers li.answer-item { 
		padding-right:20px !important 
	}
}

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

Please Log in or Create an account to join the conversation.

More
3 years 1 month ago #132429 by Ben_V

tpartner wrote: If you want to target single questions, you could add something like this to the questions source:

as ever... Tony bringing any javascript approach close to perfect ;)

Benoît

EM Variables => bit.ly/1TKQyNu | EM Roadmap => bit.ly/1UTrOB4
Last Releases => 2.6x.x goo.gl/ztWfIV | 2.06/2.6.x => bit.ly/1Qv44A1
Demo Surveys => goo.gl/HuR6Xe (already included in /docs/demosurveys)

Please Log in or Create an account to join the conversation.

More
3 years 1 month ago #132432 by honorem
Thanks Ben_V and tdpartner for your answers.

I have tried both of your solutions but none of them seems to work on the default template, i guess i have to play around a little bit in the template.css, anyhow here's an activated survey with tdpartner's solution applied without any success

Please Log in or Create an account to join the conversation.

More
3 years 1 month ago #132433 by tpartner
In your example, you are using the "Display columns" setting. You need to remove that. Additionally, you didn't add the CSS I provided. You need to make a copy of the default template and edit it.

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

Please Log in or Create an account to join the conversation.

More
3 years 1 month ago #132434 by honorem

tpartner wrote: In your example, you are using the "Display columns" setting. You need to remove that. Additionally, you didn't add the CSS I provided. You need to make a copy of the default template and edit it.


Sorry, my bad, I forgot to change the template for the survey, it has been done now, also "Display columns" is changed from 3 to nothing i.e. 1, (once you fill anything in "Display columns" you cant change it back to be 'blank' but only 1.)

Please Log in or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!