Radio Button Image Alignment

  • Profile Image
    bunddlex
    Asked on February 24, 2016 at 09:25 AM

    Hello Again,

     

    Is there a way to center the actual radio button on top or below the image using the regular radio button image option.

     

     

    Im using this code: <img alt="" src="//telecom.bunddlex.com/wp-content/uploads/2016/02/tv1.png" style="width:100px;height:76px;">

  • Profile Image
    Mike_G
    Answered on February 24, 2016 at 02:10 PM

    Here's a clone version of your form I have used for testing: https://form.jotform.com/60545579782974

    In order for you to achieve such, you need to add CSS codes to your form.

    You may refer to this guide for instructions on how to: How-to-Inject-Custom-CSS-Codes

    Here are the codes that you need to add to your form:

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

    left: 34% !important;

    top: 100% !important;

    }

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

    left: 37%;

    top: 105%;

    }

     

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

    left: 37% !important;

    top: 100% !important;

    }

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

    left: 38%;

    top: 104%;

    }

     

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

    left: 37% !important;

    top: 99% !important;

    }

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

    left: 39%;

    top: 102%;

    }