Image Radio Buttons Widget: Images for radio buttons keep disappearing

  • Perlman
    Asked on September 22, 2017 at 10:04 AM

    My images and associated url's work at first, then disappear.

  • Kiran Support Team Lead
    Replied on September 22, 2017 at 11:40 AM

    Are you referring to the form http://www.jotform.us/form/72434921602148 in your account?

    As I check this form, the images seem to be displaying correctly at my end. 

    Image Radio Buttons Widget: Images for radio buttons keep disappearing  Image 1 Screenshot 20

    Could you try opening the form in an incognito or private window or a separate browser to see if that works? If you are referring to a different form, please let us know the form ID so that we can check and provide you with necessary assistance.

    Thanks!

  • Perlman
    Replied on September 23, 2017 at 10:43 AM
    Thank you, I had to switch image hosting services. Google drive was not working.
    Can you help me reduce the space between images so that the individual images have zero space between them. I want the images to resemble a pricing comparison chart.
    Thank you,
    Spencer
    ________________________________
    ...
  • Mike
    Replied on September 23, 2017 at 12:13 PM

    There is some transparent space in your images.

    Image Radio Buttons Widget: Images for radio buttons keep disappearing  Image 1 Screenshot 20

    So I would like to suggest removing that extra space from them, and then we will see if some CSS is also required for the images positioning.

  • Perlman
    Replied on September 23, 2017 at 1:43 PM
    Thank you, I have updated the images. They are now very close to each other in 3 columns. Do you know if it is possible to make them slightly overlap each other by perhaps 1px?
    ________________________________
    ...
  • Ashwin JotForm Support
    Replied on September 23, 2017 at 3:23 PM

    Please inject the following custom css code in your form and see if that gives you desired result: 

    ul#images_button_container li {

        padding-right: 1px !important;

        margin-right: 0px !important;

        padding-left: 0px !important;

        margin-left: -3px !important;

    }

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

    Do get back to us if you need any other changes. 

  • Perlman
    Replied on September 23, 2017 at 6:43 PM
    Thank you.
    It looks like that worked well.
    Spencer
    ________________________________
    ...