How can I make the bounding box complete for Image Check box widget

  • Profile Image
    Ultigraph1
    Asked on January 13, 2019 at 09:20 AM

    Hello,

    Good Day,

    Please, how can I make the bounding box of the image options complete? Since the image options are cropped. View the issue in the link below.

    Thanks, waiting for your helpful reply.

  • Profile Image
    Mike_G
    Answered on January 13, 2019 at 11:34 AM

    You can apply CSS codes to the widget to make it show the whole box.

    Below are the CSS codes you need to inject into your form to make the widget in your form complete when viewed. How-to-Inject-Custom-CSS-Codes

    iframe[src*="/imageCheckbox/"] {

        width: 100% !important;

    }

    1547397225t11_32_19.png

    I hope this helps. If you have other questions or concerns, please do not hesitate to let us know.

  • Profile Image
    Ultigraph1
    Answered on January 13, 2019 at 12:47 PM

    Ok, thanks. I have applied the CSS. The box is now complete.
    But 1 more issue. When it comes to mobile preview, the image options do not display completely as a result of narrow screen, how can I make it responsive.

    Thanks.

  • Profile Image
    Mike_G
    Answered on January 13, 2019 at 01:31 PM

    Please give me some time. I'll work on a solution for your concern and get back to you as soon as possible.

  • Profile Image
    Mike_G
    Answered on January 13, 2019 at 03:51 PM

    In your form, please do the following to fix the issues.

    1. Remove the Mobile Responsive widget as it may result in conflict with the solution.

    1547412109t15_41_27.png

    2. Instead of adding the CSS codes I have provided in my reply above, set the width of the Image Checkboxes widget to 618px from its properties.

    1547412164t15_42_15.png

    3. Inject the CSS codes below into the form — How-to-Inject-Custom-CSS-Codes

    iframe#customFieldFrame_3 {

        height: 670px !important;

    }

    @media(max-width:480px){

    iframe#customFieldFrame_3 {

    height: 376px !important;

    }

    }

    1547412619t15_48_18.png

    4. Inject the CSS codes below to the Custom CSS tab of the Image Checkboxes widget — How-to-Inject-CSS-Codes-to-Widgets

    ul#images_button_container li {

        width: 92% !important;

        display: block !important;

    }

    ul#images_button_container li img {

        width: 100% !important;

    }

    1547412409t15_45_56.png

    Here's a clone version fo your form where I have applied the changes above.

    https://form.jotform.com/90125841817962

    Feel free to contact us anytime if you have other questions or concerns.

  • Profile Image
    Ultigraph1
    Answered on January 15, 2019 at 09:43 AM

    Okay thanks. I have applied the solution. It is now responsive towards the mobile width. But not fully responsive towards the tablet wider width.

    Thanks.

  • Profile Image
    Kevin_G
    Answered on January 15, 2019 at 11:41 AM

    I have been testing your form and I can see it displays properly on a tablet device, here is an example about it: 

    1547569972screenshot_01.png

    May you please kindly let us know which device were you testing on? 

    If possible, please also share us some screenshots about how it looks on your end, note that attached images via email replies will not be posted here, but you can upload images here following this guide: https://www.jotform.com/help/438-How-to-Post-Screenshots-to-Our-Support-Forum 

    We will wait for your response. 

  • Profile Image
    Ultigraph1
    Answered on January 16, 2019 at 10:34 AM

    1547652701Jotform 1.PNG

    1547653063Jotform 2.PNG

    Screenshots. Not responsive at these width range.

    Then, another issue detected. I added more options to this (4 in total) but I can only see 2 options.

    Thanks.

  • Profile Image
    Kevin_G
    Answered on January 16, 2019 at 12:14 PM

    The form seems to be working when I test it on a device emulator, here is my result: 

    15476587471.gif

    Based on your screenshots it seems you're using the form builder preview function to test the form, please use a real device to get accurate results. 

    If the problem persists, share us a screenshot while testing the issue on a real device. 


  • Profile Image
    Ultigraph1
    Answered on January 16, 2019 at 07:26 PM

    Ok. Thanks.

    The issue of the "only 2 options visible" can be seen on page 5 of my form.

    I have 4 options, but only 2 can be seen.

  • Profile Image
    Mike_G
    Answered on January 17, 2019 at 03:52 AM

    To fix the issue, please update the CSS codes injected in your form that I have provided you in my reply above.

    From:

    iframe#customFieldFrame_3 {

        height: 670px !important;

    }

    @media(max-width:480px){

    iframe#customFieldFrame_3 {

    height: 376px !important;

    }

    }

    To:

    iframe#customFieldFrame_3 {

        height: 1380px !important;

    }

    @media(max-width:480px){

    iframe#customFieldFrame_3 {

    height: 792px !important;

    }

    }

    I hope this helps. If you have other questions or concerns, please do not hesitate to let us know.