Other option in radio button field doesn't match the style of the other options

  • Profile Image
    Advolink1
    Asked on September 28, 2017 at 05:15 AM

    Can you please advise how to force "Other" option to conform to same look as all other options in CheckBox widget (field id input345) in form located at https://form.jotform.us/72702186153150?

    Thank you.

    Denise

  • Profile Image
    Mike_G
    Answered on September 28, 2017 at 08:46 AM

    We would like to apologize for any inconvenience. I was able to reproduce the issue you are having on a clone version of your form. I noticed that you have changed the field from a "Checkbox" (Multiple Choice Field) to a "Radio Button" (Single Choice Field). The issue, however, can be fixed by injecting custom CSS codes to your form. I will try to work on a solution for your concern and I will get back to you as soon as possible.

  • Profile Image
    Advolink1
    Answered on September 28, 2017 at 01:37 PM

    Any solution to this issue?


    Denise

  • Profile Image
    Mike_G
    Answered on September 28, 2017 at 03:19 PM

    I'm sorry if I have caused you any delay. Below are the CSS codes needed to style and position the "Other" option of the radio button field in your form.

    .form-checkbox-other, .form-radio-other {

        visibility : hidden !important;

    }

    .form-checkbox-item:not(#foo) input[type="checkbox"], 

    .form-radio-item:not(#foo) input[type="radio"] {

        visibility: hidden !important;

    }

    .form-radio-item:not(#foo) label:after,

    .form-radio-item:not(#foo) label:before {

      border-radius: 50% !important;

    }

    .form-checkbox-item:not(#foo) label:after,

    .form-checkbox-item:not(#foo) label:before {

        border-radius : 0 !important;

    }

    .form-radio-item:not(#foo) label:before,

    .form-checkbox-item:not(#foo) label:before  {

      border-width:2px !important;

    }

    .form-radio-item:not(#foo),

    .form-checkbox-item:not(#foo){

      margin-bottom: 0 !important;

      position: relative !important;

    }

    .form-radio-other:before {

        content: '' !important;

        position: absolute !important;

        display: inline-block !important;

        vertical-align: baseline !important;

        margin-right: 4px !important;

        -moz-box-sizing: border-box !important;

        -webkit-box-sizing: border-box !important;

        box-sizing: border-box !important;

        -webkit-border-radius: 50% !important;

        -moz-border-radius: 50% !important;

        border-radius: 50% !important;

        border: 0.11em solid #555555 !important;

        width: 12px !important;

        height: 12px !important;

        cursor: pointer !important;

        visibility: visible !important;

        top: 5px !important;

    }

    .form-radio-other:after {

        content: '' !important;

        position: absolute !important;

        z-index: 10 !important;

        display: inline-block !important;

        opacity: 0 !important;

        top: 8px !important;

        left: 3px !important;

        width: 6px !important;

        height: 6px !important;

        background-color: #555555 !important;

        -webkit-border-radius: 50% !important;

        -moz-border-radius: 50% !important;

        border-radius: 50% !important;

        cursor: pointer !important;

        visibility: visible !important;

    }

    .form-radio-other:checked:after {

      opacity: 1 !important;

      visibility: visible !important;

    }

    #other_346 {

      min-width: initial !important;

      width: initial !important;

    }


    How-to-Inject-Custom-CSS-Codes

    If you have other questions regarding this, please feel free to contact us again anytime.