- Posts: 14
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Rearranging buttons in radio-list question (top-r, top-l, bottom-r, bottom-l)
- Kristoss
- Topic Author
- Offline
- New Member
Less
More
4 years 3 months ago - 4 years 3 months ago #192617
by Kristoss
Rearranging buttons in radio-list question (top-r, top-l, bottom-r, bottom-l) was created by Kristoss
Hi Guys,
LS: 3.15.1+181017 / vanilla template / the survey will be displayed only on pc in chrome website (no mobile or different browsers)
I'm using radio-button-list question type. I would like to arrange this question in the following way:
- on the center of screen i would like to present an image
- on each corner of the screen (top-left, top-right, bottom-left, bottom-right) i would like to present possible answer option (buttons with labels). Explanatory figure in the attachment.
I tried to modify the ".radio-list" from "theme.css" via theme editor but with no effect.
My skill with html/css can be described as "monkey see, monkey do" so please take this into account while answering my question.
LS: 3.15.1+181017 / vanilla template / the survey will be displayed only on pc in chrome website (no mobile or different browsers)
I'm using radio-button-list question type. I would like to arrange this question in the following way:
- on the center of screen i would like to present an image
- on each corner of the screen (top-left, top-right, bottom-left, bottom-right) i would like to present possible answer option (buttons with labels). Explanatory figure in the attachment.
I tried to modify the ".radio-list" from "theme.css" via theme editor but with no effect.
My skill with html/css can be described as "monkey see, monkey do" so please take this into account while answering my question.
Attachments:
Last edit: 4 years 3 months ago by Kristoss.
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10099
- Thank you received: 3589
4 years 3 months ago - 4 years 3 months ago #192619
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 Rearranging buttons in radio-list question (top-r, top-l, bottom-r, bottom-l)
Can you attach a small sample survey (.lss file) containing only that question?
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 4 years 3 months ago by tpartner.
The topic has been locked.
- Kristoss
- Topic Author
- Offline
- New Member
Less
More
- Posts: 14
- Thank you received: 0
4 years 3 months ago #192623
by Kristoss
Replied by Kristoss on topic Rearranging buttons in radio-list question (top-r, top-l, bottom-r, bottom-l)
Thank you for quick reaction.
Sample survey in the attachment.
Sample survey in the attachment.
Attachments:
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10099
- Thank you received: 3589
4 years 3 months ago - 4 years 3 months ago #192625
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 Rearranging buttons in radio-list question (top-r, top-l, bottom-r, bottom-l)
You will need do do it with two steps...
Move the buttons into the question text element via JavaScript:
Add some styles like this:
Here is your sample survey back with those changes:
Move the buttons into the question text element via JavaScript:
Code:
<script type="text/javascript" charset="utf-8"> $(document).on('ready pjax:scriptcomplete',function(){ // Identify this question var thisQuestion = $('#question{QID}'); // Move the answer buttons into the question text element $('.answer-container', thisQuestion).removeClass('col-xs-12').appendTo($('.ls-label-question', thisQuestion)); // Loop through the answer buttons $('.bootstrap-buttons-div', thisQuestion).each(function(i) { // Assign classes for styling $(this).addClass('item-'+(i+1)); }); }); </script>
Add some styles like this:
Code:
<style type="text/css"> #question{QID} .ls-label-question { position: relative; margin: 50px auto; width: 640px; } #question{QID} .ls-label-question .answers-list { padding: 0; } #question{QID} .ls-label-question .bootstrap-buttons-div { position: absolute; width: 200px; } #question{QID} .ls-label-question .bootstrap-buttons-div.item-1 { top: 20px; left: -140px; } #question{QID} .ls-label-question .bootstrap-buttons-div.item-2 { top: 20px; right: -140px; } #question{QID} .ls-label-question .bootstrap-buttons-div.item-3 { bottom: 20px; left: -140px; } #question{QID} .ls-label-question .bootstrap-buttons-div.item-4 { bottom: 20px; right: -140px; } </style>
Here is your sample survey back with those changes:
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 4 years 3 months ago by tpartner.
The following user(s) said Thank You: DenisChenu, gabrieljenik
The topic has been locked.
- Kristoss
- Topic Author
- Offline
- New Member
Less
More
- Posts: 14
- Thank you received: 0
4 years 3 months ago #192635
by Kristoss
Replied by Kristoss on topic Rearranging buttons in radio-list question (top-r, top-l, bottom-r, bottom-l)
Thank you for help but unfortunately I cannot reproduce your output. I'm adding my screenshot - this is how your survey is displayed on my setting.
Attachments:
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10099
- Thank you received: 3589
4 years 3 months ago #192636
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 Rearranging buttons in radio-list question (top-r, top-l, bottom-r, bottom-l)
Can you activate the sample survey and give us a link?
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
- Kristoss
- Topic Author
- Offline
- New Member
Less
More
- Posts: 14
- Thank you received: 0
4 years 3 months ago #192637
by Kristoss
Replied by Kristoss on topic Rearranging buttons in radio-list question (top-r, top-l, bottom-r, bottom-l)
Yes. I see the source code in the question but the output is regular as for button-list question.
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10099
- Thank you received: 3589
4 years 3 months ago #192665
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 Rearranging buttons in radio-list question (top-r, top-l, bottom-r, bottom-l)
Without a link to a live survey I cannot see if there are and JavaScript errors or other issues.
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
- Kristoss
- Topic Author
- Offline
- New Member
Less
More
- Posts: 14
- Thank you received: 0
4 years 3 months ago #192673
by Kristoss
Replied by Kristoss on topic Rearranging buttons in radio-list question (top-r, top-l, bottom-r, bottom-l)
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10099
- Thank you received: 3589
4 years 3 months ago - 4 years 3 months ago #192691
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 Rearranging buttons in radio-list question (top-r, top-l, bottom-r, bottom-l)
Hmm...that older version uses a different HTML structure for the button question. I cannot test directly but try replacing the script and styles in the question text with these:
Code:
<script type="text/javascript" charset="utf-8"> $(document).on('ready pjax:scriptcomplete',function(){ // Identify this question var thisQuestion = $('#question{QID}'); // Move the answer buttons into the question text element $('.answer-container', thisQuestion).removeClass('col-xs-12').appendTo($('.ls-label-question', thisQuestion)); // Loop through the answer buttons $('.ls-label-question .button-item', thisQuestion).each(function(i) { // Assign classes for styling $(this).addClass('item-'+(i+1)); }); }); </script>
Code:
<style type="text/css"> #question{QID} .ls-label-question { position: relative; margin: 50px auto; width: 640px; } #question{QID} .ls-label-question .answers-list { padding: 0; } #question{QID} .ls-label-question .answers-list .btn-group { display: block; position: static; } #question{QID} .ls-label-question .button-item { display: block; position: absolute; width: 200px; border-radius: 6px; } #question{QID} .ls-label-question .button-item.item-1 { top: 20px; left: -140px; } #question{QID} .ls-label-question .button-item.item-2 { top: 20px; right: -140px; } #question{QID} .ls-label-question .button-item.item-3 { bottom: 20px; left: -140px; } #question{QID} .ls-label-question .button-item.item-4 { bottom: 20px; right: -140px; } </style>
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 4 years 3 months ago by tpartner.
The topic has been locked.