How can I make the images of the Image Radio Buttons to look exactly the same as Image Checkboxes?

  • Profile Image
    livro.ca
    Asked on January 16, 2018 at 09:40 PM

    Hi,

    For the life of me, I cannot figure out how to display the widget on this form:  https://form.jotform.com/80150964017250 fully.

    It cuts after the first image.

    Also, I'd like to mimic the same look on a image radio button widget too, but when I try to copy the css onto the second widget on the page, it doesn't affect it.
    I need your help resolving this please.

    Thanks!

    PS: you can edit directly on that form; I set it up for testing. Thanks!

  • Profile Image
    livro.ca
    Answered on January 16, 2018 at 11:22 PM

    Let me rephrase as my question is long for no good reason;

    on that form, I have a checkbox and radio box image widget. I want the radio box to look like the checkbox... unable to make it happen. My css variables may have mistakes in them. Could you kindly help me correct them?

  • Profile Image
    Ardian_L
    Answered on January 17, 2018 at 06:36 AM

    I have added the CSS code below on the Custom css area of the Image Checkbox widget:

    li {

        width: 80px !important;

    }

    li img {

      width:100% !important;

    }

    Please let us know if this wasn't your question. 

  • Profile Image
    livro.ca
    Answered on January 17, 2018 at 07:13 AM

    No. Must have misunderstood.

    I returned everything the way it was.

    The TOP widget (image checkbox) is fine the way it is now, except for the fact that it cuts off in height when viewed.

    The bottom widget (image radio box) is not fine. I want it to look like the top widget.

  • Profile Image
    Ardian_L
    Answered on January 17, 2018 at 08:45 AM

    I apologize about that. Please check your form now. I made modifications needed so they can look the same.

    Please let us know if you have any other question.

  • Profile Image
    livro.ca
    Answered on January 17, 2018 at 03:23 PM

    So far so good... just an issue with the size of the text (image labels) if you compare the 2 widgets; one text is too small in comparison. How can I rectify this? Thanks!

  • Profile Image
    Welvin
    Answered on January 17, 2018 at 04:32 PM

    I've fixed it by injecting the following custom CSS codes in the widget:

    #images_button_container label span {

        font-size: 16px !important;

    }


  • Profile Image
    livro.ca
    Answered on January 17, 2018 at 10:12 PM

    That helped. Thank you Welvin