Move the radio buttons underneath the word.

  • CrusaderMedicalCare
    Asked on August 26, 2020 at 7:31 AM

    I am struggling to move the multiple choices boxes underneath the word it represents. At present, its to the right of it and it can be difficult to see which one you are selecting. Due to the nature of the questionairre, its really important i get a reliable intake of results otherwise its pointless. 

  • Ariel JotForm Support
    Replied on August 26, 2020 at 9:45 AM

    Hi there,

    Thank you for your message.

    Just to be clear, are you referring to this form, https://eu.jotform.com/201741923658055?

    I've checked your form and it currently doesn't have "multiple choices boxes".

    Are you perhaps referring to the single choice radio buttons?

    15984473032020 08 26 21 07 47 Screenshot 10

    If that the case, you can inject the following CSS code into your form to move the radio buttons under the option text.

    .form-radio-item:not(#foo) label {
        text-align: center;
        margin: auto;
        display: flex;
        flex-direction: column-reverse;
    }
    .form-radio-item:not(#foo) label::before {
        position: static;
        margin: auto;
        text-align: center;
    }
    .form-radio-item:not(#foo) label::after {
        position: relative;
        margin: auto;
        text-align: center;
        top: 41.5px;
        left: auto;
    }

    Related Guide: How to Inject Custom CSS Codes.

    Once applied, it should look something like so.

    15984493702020 08 26 21 42 30 Screenshot 21

    Please give it a try and let us know how it goes.