Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

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

Styling radio elements as checkboxes and vice versa

  • krosser
  • krosser's Avatar Topic Author
  • Offline
  • Elite Member
  • Elite Member
More
6 years 1 month ago #182557 by krosser
Replied by krosser on topic Styling radio elements as checkboxes and vice versa
Well, I see your point and it makes sense in case of a radio list question to have only one comment box. The thing is that only a few answer choices need comments/specification and I guess I would need to add 'specify' at the end of those answer choices and leave one box. But I went for a multiple choice with individual boxes next to those answer choices, making them exclusive of each other.

The design issue came up when there are almost all multiple-choice questions (with and without comments) in another group with only one simple radio list question, which stood out of the crowd in checkboxes design. So, I was asked to change radio buttons to checkboxes buttons for design consistency. But it doesn't look nice with CSS.
I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team & Official Partner
  • LimeSurvey Community Team & Official Partner
More
6 years 1 month ago #182601 by DenisChenu
Replied by DenisChenu on topic Styling radio elements as checkboxes and vice versa

krosser wrote: The thing is that only a few answer choices need comments/specification and I guess I would need to add 'specify' at the end of those answer choices and leave one box.

Use relevance equation (or condition GUI editor) to show the comment box only for checked choice.

Why do complex when it can be simple …
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member. - Professional support - Plugins, theme and development .
I don't answer to private message.
The following user(s) said Thank You: tpartner
The topic has been locked.
  • krosser
  • krosser's Avatar Topic Author
  • Offline
  • Elite Member
  • Elite Member
More
6 years 1 month ago #182608 by krosser
Replied by krosser on topic Styling radio elements as checkboxes and vice versa

DenisChenu wrote: Use relevance equation (or condition GUI editor) to show the comment box only for checked choice.

Why do complex when it can be simple …


Did you mean the "question validation equation"? But I didn't know that the comment box can be conditioned to be either shown or not using equations. Do you have an example?
I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 1 month ago #182609 by tpartner
Replied by tpartner on topic Styling radio elements as checkboxes and vice versa

So, I was asked to change radio buttons to checkboxes buttons for design consistency. But it doesn't look nice with CSS.

Add something like this to the question source - this will allow you to pick up most of the core style rules for the check-boxes.

(the styles could be placed in custom.css instead of in the question source)

Code:
<script type="text/javascript" charset="utf-8">
  $(document).on('ready pjax:scriptcomplete',function(){
    $('#question{QID}').addClass('with-checkboxes');
    $('#question{QID} .radio-item').removeClass('radio-item').addClass('checkbox-item');
  });  
</script>
<style type="text/css">
  .list-radio.with-checkboxes .checkbox-item {
    padding-left: 3px;
  }
  .list-radio.with-checkboxes .checkbox-item input[type="radio"]:indeterminate + label::after {
    display: none;
  }
</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: krosser
The topic has been locked.
  • krosser
  • krosser's Avatar Topic Author
  • Offline
  • Elite Member
  • Elite Member
More
6 years 1 month ago #182620 by krosser
Replied by krosser on topic Styling radio elements as checkboxes and vice versa
This works nicely, Tony. Many thanks!
I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
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