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

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?

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.

Mmm - yeah, but no...

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

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;
}

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?

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.

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;
}