Welcome to the LimeSurvey Community Forum

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

Display multiple choice question answers in 2 or more columns on mobile phone

More
2 years 9 months ago #218019 by hufan
We can set Display columns setting in multiple choice question to make it display answers in 2 or more columns. However, it displays in only one column on mobile phone, can I make it to display in 2 or more columns on mobile phone as it does on desktop?
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 9 months ago #218029 by tpartner
Add this script to the question source to modify the Bootstrap classes in 2-column and 3-column questions.
 
 
Code:
<script type="text/javascript" data-author="Tony Partner">  
  $(document).on('ready pjax:scriptcomplete',function(){
 
    $('#question{QID} .answers-list > ul').removeClass('col-xs-12');
 
    if($('#question{QID} .answers-list > ul').length == 2) {
      $('#question{QID} .answers-list > ul').addClass('col-xs-6');
    }
 
    if($('#question{QID} .answers-list > ul').length == 3) {
      $('#question{QID} .answers-list > ul').addClass('col-xs-4');
    }
  });
</script>

Sample survey attached: 

File Attachment:

File Name: limesurvey...1446.lss
File Size:25 KB

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: hufan
The topic has been locked.
More
2 years 9 months ago #218031 by hufan
This works perfect!
Thank you so much tpartner!
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose