Spacing between answes in multiple choice

More
1 year 7 months ago #193504 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:

Please Log in to join the conversation.

More
1 year 7 months ago #193506 by tpartner
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.

Please Log in to join the conversation.

More
1 year 7 months ago - 1 year 7 months ago #193507 by Joffm
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
.
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
Attachments:
Last edit: 1 year 7 months ago by Joffm.

Please Log in to join the conversation.

More
1 year 7 months ago #193512 by andrej.lindic
That works perferctly!

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

Thank you,

Andrej

Please Log in to join the conversation.

More
1 year 3 months ago #201224 by asilbering
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:

Please Log in to join the conversation.

More
1 year 3 months ago - 1 year 3 months ago #201228 by Joffm
  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

    <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: 1 year 3 months ago by Joffm.

Please Log in to join the conversation.

More
1 year 3 months ago #201244 by asilbering
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!

Please Log in to join the conversation.

More
7 months 17 hours ago #212545 by cosyns
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 
Attachments:

Please Log in to join the conversation.

More
7 months 7 hours ago #212548 by Joffm
Hi, Hannes,
my answer in the third post here is still valid.
<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
</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
Attachments:
The following user(s) said Thank You: cosyns

Please Log in to join the conversation.

More
7 months 7 hours ago - 7 months 7 hours ago #212549 by Joffm
Arrays:
<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: 7 months 7 hours ago by Joffm.

Please Log in to join the conversation.

More
7 months 7 hours ago #212550 by DenisChenu
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 service on demand , plugin development . I don't answer to private message.

Please Log in to join the conversation.

More
7 months 6 hours ago #212555 by cosyns
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!

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now