OTHER option for radio buttons forced to new line - how to fix?

  • Profile Image
    WISSF
    Asked on March 19, 2019 at 09:26 PM

    For some reason, the "other" option in a radio button control is forced to a new line.

    There doesn't appear to be a form designer option to line it up horizontally with the other options in the list.

    Also, by default, the text field is way off kilter with the radio button element... I think most people would want the radio button centered vertically with the text area. Right?

    Is there a fix for this?

  • Profile Image
    jherwin
    Answered on March 19, 2019 at 11:26 PM

    Please inject this custom CSS code to your form:

    #other_14 {
        margin-left : 290px!important;
        margin-top : -20px!important;
    }
    #input_14.form-radio-other-input.form-textbox {
        margin-left : 320px!important;
        top : -65px!important;
    }

    Guide: How to Inject Custom CSS Codes

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

  • Profile Image
    WISSF
    Answered on March 20, 2019 at 12:36 AM

    Mmm - yeah, but no...

    Also there is a ton of new space below the Gender line which needs to get deleted too...

    1553056566Screenshot 2019-03-19 21.35.06

  • Profile Image
    jherwin
    Answered on March 20, 2019 at 02:17 AM

    Please replace the custom CSS code I gave you before with this:

    #other_14 {
        margin-left : 290px!important;
        margin-top : -20px!important;
    }
    #input_14.form-radio-other-input.form-textbox {
        margin-left : 320px!important;
    }
    .form-radio-other-input.form-textbox {
        top : -60px!important;
        position: relative;
    }
    #cid_14 div.form-multiple-column {
        height : 30px;
    }

    1553062599result.PNG


  • Profile Image
    WISSF
    Answered on April 04, 2019 at 10:44 PM

    That code doesn't work either.

    Which ultimately begs the question, why doesn't the OTHER feature work out of the box? It's hardly a complicated use case.

    Can someone provide better corrective css?1554432269Screenshot 2019-04-04 19.43.38

  • Profile Image
    jherwin
    Answered on April 05, 2019 at 12:03 AM

    Please check your form. I fixed the radio button/gender field and inject the correct CSS code for you.

    Here's the URL of your form: https://form.jotform.com/90650772515155.

    Please check and see if it is aligned as you wish.

  • Profile Image
    jherwin
    Answered on April 05, 2019 at 12:06 AM

    In addition, if you want to extend the width of the "other textbox" field, please inject this custom CSS code:

    input#input_162 {
        width: 180px!important;
    }