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

Can you provide a link to a live survey so we can see what CSS rules are affecting them?

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
.
and got in "fruity" theme




Joffm

That works perferctly!

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

Thank you,

Andrej

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

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>

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!

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 

Hi, Hannes,
my answer in the third post here is still valid.
And for arrays you may try
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
 

Arrays:
 

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

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!