Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

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

  • honorem
  • honorem's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
8 years 8 months ago #132412 by honorem
question and question answers on same line/row for List (radio) q-type was created 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:
The topic has been locked.
More
8 years 8 months ago #132413 by Ben_V
Replied by Ben_V on topic question and question answers on same line/row for List (radio) q-type
you can adapt (elements, classes) something starting from:
(paste this js code in the group description or in your first question help area;)
Code:
<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)
The topic has been locked.
  • honorem
  • honorem's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
8 years 8 months ago - 8 years 8 months ago #132418 by honorem
Replied by honorem on topic question and question answers on same line/row for List (radio) q-type

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;)

Code:
<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: 8 years 8 months ago by honorem.
The topic has been locked.
More
8 years 8 months ago - 8 years 8 months ago #132419 by Ben_V
Replied by Ben_V on topic question and question answers on same line/row for List (radio) q-type
Probably this does not work because css classes are wrong and you have to adapt this part:
Code:
.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
Code:
<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: 8 years 8 months ago by Ben_V.
The following user(s) said Thank You: honorem
The topic has been locked.
  • tammo
  • tammo's Avatar
  • Offline
  • Official LimeSurvey Partner
  • Official LimeSurvey Partner
More
8 years 8 months ago #132421 by tammo
Replied by tammo on topic question and question answers on same line/row for List (radio) q-type
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 Respondage
For Limesurvey reporting, education and customized themes
respondage.nl
The topic has been locked.
More
8 years 8 months ago - 8 years 8 months ago #132422 by Ben_V
Replied by Ben_V on topic question and question answers on same line/row for List (radio) q-type

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...
Code:
<style type='text/css' media='screen and (min-width:481px)'>
Code:
<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: 8 years 8 months ago by Ben_V.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 8 months ago #132425 by tpartner
Replied by tpartner on topic question and question answers on same line/row for List (radio) q-type
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:
Code:
<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:
Code:
@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
The topic has been locked.
More
8 years 8 months ago #132429 by Ben_V
Replied by Ben_V on topic question and question answers on same line/row for List (radio) q-type

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)
The topic has been locked.
  • honorem
  • honorem's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
8 years 8 months ago #132432 by honorem
Replied by honorem on topic question and question answers on same line/row for List (radio) q-type
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
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 8 months ago #132433 by tpartner
Replied by tpartner on topic question and question answers on same line/row for List (radio) q-type
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.
The topic has been locked.
  • honorem
  • honorem's Avatar Topic Author
  • Offline
  • Junior Member
  • Junior Member
More
8 years 8 months ago #132434 by honorem
Replied by honorem on topic question and question answers on same line/row for List (radio) q-type

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.)
The topic has been locked.
Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source