Other radio button not matching template.

  • Profile Image
    brandon.carlson
    Asked on February 21, 2018 at 06:31 PM


    Using the 'simplicity' template, the radio button for other is not matching.

    15192556892018-02-21 15_26_52-Sales Ques

  • Profile Image
    Kevin_G
    Answered on February 21, 2018 at 08:36 PM

    This CSS code will help you styling the other element and force it to match the rest of the options in the field. 

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

        display: none !important;

    }

    [data-type="control_checkbox"] span:last-child label, [data-type="control_radio"] span:last-child label{

        display: block !important;

        font-size: 0px;

    }

    .form-checkbox-item input[class*="other"], .form-radio-item input[class*="other"]{

        margin-left: 40px !important;

    }

    .form-checkbox-item input[class*="other"], .form-radio-item input[class*="other"] {

        margin-left: 25px !important;

    }

    This guide will help you injecting the code to your form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    I hope this helps. 

  • Profile Image
    brandon.carlson
    Answered on February 21, 2018 at 08:52 PM

    When I inject that code, I can no longer see the standard options.


    15192642612018-02-21 17_49_41-The Easies

  • Profile Image
    ashwin_d
    Answered on February 22, 2018 at 02:01 AM

    I am checking this issue in your form. I will get back to you on this soon.

  • Profile Image
    ashwin_d
    Answered on February 23, 2018 at 04:35 AM

    Please inject the following custom css code in your form and see if that solves your problem:

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

        display: none !important;

    }

    #cid_562 > div > span:nth-child(4) > label {

        display: block !important;

    }

    .form-radio-item:not(#foo) .form-radio-other-input {

        margin: -92px !important;

    }

    .form-radio-item:not(#foo) input:checked + label:after {

        opacity: 1;

    }

    The following guide should help you how to inject custom css code in form:  https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

  • Profile Image
    brandon.carlson
    Answered on February 23, 2018 at 12:32 PM

    It worked for the first one, but didn't apply to the second two.

    Is this a situation where if I added an 'other' option in the future, I'd need to tweak the CSS to include that specific one?


    15194070152018-02-23 09_29_30-2018-02-23

  • Profile Image
    Richie_P
    Answered on February 23, 2018 at 01:47 PM

    I checked your form and it seems the "other" radio button is matched with the template.

    It really depends on the template used,but you can still use my colleagues code.

    May we know what form is the other two so we can check it out?


    Thank you.


  • Profile Image
    brandon.carlson
    Answered on February 23, 2018 at 01:52 PM

    https://form.jotform.com/80316262184957 


    There is a collapsed section at the end of the form where the other "others" are.


    15194118902018-02-23 10_51_06-Sales Ques

  • Profile Image
    Richie_P
    Answered on February 23, 2018 at 02:30 PM

    Thank you for the added information, can you try to add these css codes.


    #cid_531 > div > span:nth-child(2) > label {

        display: block !important;

    }
    input#other_531.form-checkbox-other.form-checkbox{
      display: none!important;
    }

    input#input_531.form-checkbox-other-input.form-textbox{
      margin-left: -92px;
    }
    #cid_548> div > span:nth-child(3) > label {

        display: block !important;

    }
    input#other_548.form-checkbox-other.form-checkbox{
      display: none!important;
    }

    input#input_548.form-checkbox-other-input.form-textbox{
      margin-left: -92px;
    }

    Here is a sample output.

    Guide on -How-to-Clone-an-Existing-Form-from-a-URL

  • Profile Image
    brandon.carlson
    Answered on February 23, 2018 at 02:38 PM

    Thanks for all the help.

    Looks like this template will require a custom CSS change anytime we add an "Other" field. 


  • Profile Image
    Richie_P
    Answered on February 23, 2018 at 03:19 PM


    On behalf of my colleagues, you are welcome.

    It seems you are right, on changing the css every time  "Other" field is created using the template.

    You can use the code given to edit the css when you add an "other" field.

    Simply, check for the Field Details and look for the number.

    then edit the code, for example  #cid_521 into #cid_531 > div > span:nth-child(2) > label {

        display: block !important;

    }

    then the span:nth-child(number) the number represents the radio button spaces, 1 for first radio button, 2 for second and so on. 

    Just like the code above, the only difference is the Field Detail number.

    Hope this information helps.