Image Radio Buttons demo is not working

  • pthimsen
    Asked on February 23, 2015 at 4:16 PM

    I'd asked about an image option that showed selections as the images themselves. I see there is a widget for this that looks similar to the image check box. I do need the Radio Button options as they can only select one. The widget as it appears in the demo is apparently broken or no longer available.

    Is there a time this will be fixed and available in the future?

    http://form.jotform.us/form/50395015285151

    Here is my form and I have several pages that feature images as the choice. The way these appear are my preference.

    Thank you,
    Pat

     

     

     

  • Ben
    Replied on February 23, 2015 at 5:34 PM

    Thank you for letting us know about this Pat. I have update the demo so it will work now.

    Please re-check the Image Radio Buttons widget page.

    Can you please tell us if you are looking to add this widget to your jotform and have some issues doing so? If that is the case, please let us know what is the page where you are adding it so that we can find it easier and assist you in setting it up?

  • pthimsen
    Replied on March 6, 2015 at 3:24 PM

    Hi there - just following up on this. So the demo is working but not the actual Image Radio Button Widget. The demo shows the images as the button but what shows up on the form is circle button under the image which. The circle button looks out of place and not as clean as having the image be the button which is a much better look to me.

    Please let me know once this Image Radio button is fixed to be as it appears in the demo. I have multiple pages on my form where we are using this option. I will update the form once it is corrected.

    Thank you - Pat

     

     

     

  • Ben
    Replied on March 6, 2015 at 4:42 PM

    OK, I see what you mean Pat, but please note that this is the latest version of the Radio Image Buttons widget and that is why it is not the same as the old screenshots.

    We can make it look the same however by adding the following code:

    div.orange-radio {
        background: none repeat scroll 0 0 transparent;
        border: 2px solid gray;
        border-radius: 4px;
        height: 80px; /* this must be set to the same number as the image size height is set to */
        left: -2px !important;
        top: 0 !important;
        width: 80px; /* this must be set to the same number as the image size width is set to */
    }
    li.checked div.orange-radio {
        background: none repeat scroll 0 0 rgba(180, 90, 190, 0.2);
    }

    You can see a demo of it here: http://form.jotformpro.com/form/50646843596972

  • pthimsen
    Replied on March 6, 2015 at 5:30 PM

    Weird that the old version seems more up-to-date than the new version - I will give this a try although I am not at all knowledgeable when it comes to coding (which is why I was so pleased to find JotForm). Thank you -

  • Kiran Support Team Lead
    Replied on March 6, 2015 at 7:32 PM

    Sure. You just need to add the code provided by my colleague in the Custom CSS code section of the widget. 

    Image Radio Buttons demo is not working Image 1 Screenshot 20

    Please get back to us if you need any further assistance. We will be happy to help.

    Thank you!