Image Radio Buttons demo is not working

  • Profile Image
    pthimsen
    Asked on February 23, 2015 at 04: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

     

     

     

  • Profile Image
    Ben
    Answered on February 23, 2015 at 05: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?

  • Profile Image
    pthimsen
    Answered on March 06, 2015 at 03: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

     

     

     

  • Profile Image
    Ben
    Answered on March 06, 2015 at 04: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

  • Profile Image
    pthimsen
    Answered on March 06, 2015 at 05: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 -

  • Profile Image
    Kiran
    Answered on March 06, 2015 at 07:32 PM

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

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

    Thank you!