Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

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

Spacing between answes in multiple choice

  • andrej.lindic
  • andrej.lindic's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
5 years 1 week ago #193504 by andrej.lindic
Spacing between answes in multiple choice was created by andrej.lindic
Hi!

For some reason there is a lot of space between answers in multiple choice question. I tried to find a way to change template to shorten that space but wasn't able to.

Single radio is kind of ok, but multiple choice is too much. I attached a picture. It's especially bothering on a phone because it takes a lot of space.

Is there way to change those spacings? Both for single choice radio and multiple choice.

Thank you,

Andrej
Attachments:
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 1 week ago #193506 by tpartner
Replied by tpartner on topic Spacing between answes in multiple choice
Can you provide a link to a live survey so we can see what CSS rules are affecting them?
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 1 week ago - 5 years 1 week ago #193507 by Joffm
Replied by Joffm on topic Spacing between answes in multiple choice
I always recommend to use a web development tool that is included in each browser to see which classes are affected.

Though you didn't mention your LS version nor the theme, I used LS 3.22. and "fruity"

I played around with these values
.
Code:
fruity .question-item {
    padding-top: 0.5em;
}
 
li.radio-item, li.checkbox-item, li.radio-text-item, li.checkbox-text-item {
    margin-bottom: 0em;
}

and got in "fruity" theme




Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 5 years 1 week ago by Joffm.
The topic has been locked.
  • andrej.lindic
  • andrej.lindic's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
5 years 1 week ago #193512 by andrej.lindic
Replied by andrej.lindic on topic Spacing between answes in multiple choice
That works perferctly!

Yes, I'm using 3.22.1 on some extension of fruity theme.

Thank you,

Andrej
The topic has been locked.
More
4 years 7 months ago #201224 by asilbering
Replied by asilbering on topic Spacing between answes in multiple choice
Hi,

I am using skelvanilla in LS 3.19 and have the same problem with too much space between answer options in radio button and multiple choice questions. There is also quite a lot of extra padding around the answer options...

I used the web inspector and tried adding the settings to custom.css and theme.css with no luck, I understand the principle but cannot get the syntax right...

I would be very grateful for any help.

Thanks in advance!
Best,
Ana
Attachments:
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 7 months ago - 4 years 7 months ago #201228 by Joffm
Replied by Joffm on topic Spacing between answes in multiple choice
  1. Hi, Ana,
    I used "well wrapper" and variant="Bootstrap - button and checkbox"



    In the radio question I entered as css class "skel-start-group-question"
    In the other "skel-wrap-none"
    In my opinion it looks much better.

    I will investigate how to find some css solution.

    Joffm

    P.S.
    I cannot reproduce your screenshot.
    Which settings did you use?
    By the way: I use the latest version of the theme released 10.06.2020


    I found something, which is obviously too low, but to show the effect (0.1rem). You may try with 0.4 rem

    Code:
    <style>
.radio-list .radio-item label, .checkbox-list .checkbox-item label, .answers-list .radio-item label {
    padding: 0.1rem 1.14rem;
}
</style>
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Attachments:
Last edit: 4 years 7 months ago by Joffm.
The topic has been locked.
More
4 years 7 months ago #201244 by asilbering
Replied by asilbering on topic Spacing between answes in multiple choice
Thanks Joffm!

I use "Spacelab - awesome checkbox and radio" with panel wrapper (I don't like the lines between the answers).

I have to go now, I will test your suggestions later and let you know.
I am not sure where to find the version of the theme, but I installed it last Friday I think...

Thanks a lot for you help!
The topic has been locked.
More
3 years 11 months ago #212545 by cosyns
Replied by cosyns on topic Spacing between answes in multiple choice
Hello everyone,

I am having the same problem with the white space between the different items of "list" as well as "matrix"-questions.
I am using the Version 3.25.4+201215, some kind of extension of the "fruity" design.

I added to custum.css the following, but it does not have any effect (see attachement):

.radio-item,
.checkbox-item,
.radio-text-item,
.checkbox-text-item {
        margin-bottom: 0;
}


I would be very greatful if someone could help me out!
Thanks in advance,
Best
Hannes 
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 11 months ago #212548 by Joffm
Replied by Joffm on topic Spacing between answes in multiple choice
Hi, Hannes,
my answer in the third post here is still valid.
Code:
<style type="text/css">.fruity .question-item {
    padding-top: 0.1em;
}
li.radio-item,
li.checkbox-item,
li.radio-text-item,
li.checkbox-text-item {
    margin-bottom: 0em;
}

And for arrays you may try
Code:
</style>
.fruity .table>tbody>tr>td, .fruity .table>tbody>tr>th {
    padding: 3px 8px;
</style>

Either with the <style> tags in your question text or without in your "custom.css".

Always adapt the values to find the best solution for your needs.
 

Joffm
 
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: cosyns
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 11 months ago - 3 years 11 months ago #212549 by Joffm
Replied by Joffm on topic Spacing between answes in multiple choice
Arrays:
Code:
<style type="text/css">
.fruity .table>tbody>tr>td, .fruity .table>tbody>tr>th {
    padding: 3px 8px;
</style>
 
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 3 years 11 months ago by Joffm.
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team & Official Partner
  • LimeSurvey Community Team & Official Partner
More
3 years 11 months ago #212550 by DenisChenu
Replied by DenisChenu on topic Spacing between answes in multiple choice
About SkelVanilla : you can report the issue

BUT : i fix only html for Boostrap default and Contrast

About other theme : need to fix it on css generator : gitlab.com/SondagesPro/SurveyThemes/less-skelvanilla
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 topic has been locked.
More
3 years 11 months ago #212555 by cosyns
Replied by cosyns on topic Spacing between answes in multiple choice
Thanks a lot Joffm!
It worked like a charm. The problem seemed to be that I left out te "li."'s. And I did so because the Editor gave me a warning stating that "Element (li.radio-item) is overqualified, just use .radio-item without element name".

Thanks again, you are the best!
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