Help with multiple choice questions

  • Profile Image
    ESFA
    Asked on January 13, 2020 at 05:21 PM

    Hi,

    I have a series of multiple choice questions on a form - most are simple "Yes" or "No".  For some strange reason I cannot work out the question is on one line and the choices are on the line below.

    The label alignment for each question is "Left" so I cannot see why this is happening.

    The form is https://form.jotform.co/93206670201851

    Screen shot of what is currently showing is in the blue box below and what it should be is in red.

    Thanks.1578954068Jotform20200114.png

  • Profile Image
    KrisLei
    Answered on January 13, 2020 at 08:35 PM

    Kindly, try to toggle off the Shrink option on the Multiple Choice Properties, under the Advanced tab.

    1578965659Shrink.jpg

    Let us know if you need further assistance.

  • Profile Image
    ESFA
    Answered on January 13, 2020 at 09:33 PM

    Thanks KrisLei.

    I was using Shrink to line up all the fields right on the left hand side of the page which would be preferred if it was possible.

  • Profile Image
    KrisLei
    Answered on January 14, 2020 at 12:43 AM

    Thank you for the clarification.

    This is possible with CSS codes, please give me some time to meet your requirements. I will get back to you shortly.

    Thank you.

  • Profile Image
    ESFA
    Answered on January 14, 2020 at 11:02 PM

    Thank you KrisLei !!

  • Profile Image
    KrisLei
    Answered on January 15, 2020 at 11:05 AM

    Apologies for the delay.

    Kindly, change the width on line 149 of the Inject Custom CSS tab:

    1579104008CSS codes.jpg

    Or just replace it with these codes:

    #label_201, #label_202, #label_203, #label_204, #label_205, #label_206, #label_207, #label_208, #label_209, #label_210, #label_211, #label_426 {

        width : 375px !important;

        margin : px px px -35px;

    }

    Then add these codes at the bottom:

    #id_201, #id_202, #id_203, #id_204, #id_205, #id_206, #id_207, #id_208, #id_209, #id_210, #id_211

    {

        padding : 1px;

    }

    That section of your form should look like this on preview mode or when published:

    1579104283preview mode.jpg

    Let us know if it didn't meet your requirements or if you need further assistance. 

     

     

  • Profile Image
    ESFA
    Answered on January 21, 2020 at 06:13 PM

    Thanks KrisLei - works perfectly.