Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

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

List (radio) and visually separating N/A -option

  • Jmantysalo
  • Jmantysalo's Avatar Topic Author
  • Offline
  • Platinum Member
  • Platinum Member
More
5 years 4 months ago #192594 by Jmantysalo
List (radio) and visually separating N/A -option was created by Jmantysalo
A user wants a survey that asks something like "Do you like tomatoes?" with answer options "Very much", "Quite much", ..., "Not at all" and last "Have never eaten one". As the last option is logically different, she wants it to be visually separated too, for example having more space on the left than is between other options. How to do that?
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 4 months ago #192597 by tpartner
Replied by tpartner on topic List (radio) and visually separating N/A -option
What LimeSurvey version and theme are you using?
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • Jmantysalo
  • Jmantysalo's Avatar Topic Author
  • Offline
  • Platinum Member
  • Platinum Member
More
5 years 4 months ago #192598 by Jmantysalo
Replied by Jmantysalo on topic List (radio) and visually separating N/A -option
Version 3.20 and Fruity Theme.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 4 months ago #192600 by tpartner
Replied by tpartner on topic List (radio) and visually separating N/A -option
Add something like this to the question source:

Code:
<style type="text/css">
 
  #question{QID} .answer-item:last-child {
    margin-top: 2em;
  }
</style>



Sample survey attached:

File Attachment:

File Name: limesurvey...1-09.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 topic has been locked.
  • Jmantysalo
  • Jmantysalo's Avatar Topic Author
  • Offline
  • Platinum Member
  • Platinum Member
More
5 years 4 months ago #192611 by Jmantysalo
Replied by Jmantysalo on topic List (radio) and visually separating N/A -option
I was not able to add style to a question, but I can modify css files of the theme. I had forgotten :last-child -selector, so thanks for your responce! I got this to work on normal radio buttons.

However, with Bootstrap buttons style the same does not work. I tried

.bootstrap-buttons-div:last-child { margin-left: 5em; }

but it did nothing. For testing I also check that without :last-child all buttons will have more space in between. So somehow the browser does not recognize a DIV element of style bootstrap-buttons-div so that it would see what is the last one.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 4 months ago #192615 by tpartner
Replied by tpartner on topic List (radio) and visually separating N/A -option
If you explore the DOM with developer tools, you will see that the last button is actually not a last child - there is a hidden <div> element after it.

You will need to target the second last child and also add some media queries so it behaves well on all screen sizes:

Code:
<style type="text/css">
 
  @media only screen and (min-width: 768px) {
 
    #question{QID} .bootstrap-buttons-div:nth-last-child(2) {
      margin-left: 5em;
    }
  }
 
  @media only screen and (max-width: 767px) {
 
    #question{QID} .bootstrap-buttons-div:nth-last-child(2) {
      margin-top: 2em;
    }
  }
</style>



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: Jmantysalo
The topic has been locked.
  • Jmantysalo
  • Jmantysalo's Avatar Topic Author
  • Offline
  • Platinum Member
  • Platinum Member
More
5 years 4 months ago #192616 by Jmantysalo
Replied by Jmantysalo on topic List (radio) and visually separating N/A -option
Great! Now this works.
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