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

  • Ultigraph1
    Asked on January 13, 2019 at 9: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.

  • Mike_G JotForm Support
    Replied 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 Screenshot 10

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

  • Ultigraph1
    Replied 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.

  • Mike_G JotForm Support
    Replied on January 13, 2019 at 1: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.

  • Mike_G JotForm Support
    Replied on January 13, 2019 at 3: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 Screenshot 10

    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 Screenshot 21

    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 Screenshot 32

    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 Screenshot 43

    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.

  • Ultigraph1
    Replied on January 15, 2019 at 9: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.

  • Kevin Support Team Lead
    Replied 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 Screenshot 10

    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. 

  • Ultigraph1
    Replied on January 16, 2019 at 10:34 AM

    1547652701Jotform 1 Screenshot 10

    1547653063Jotform 2 Screenshot 21

    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.

  • Kevin Support Team Lead
    Replied 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: 

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

    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. 


  • Ultigraph1
    Replied on January 16, 2019 at 7: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.

  • Mike_G JotForm Support
    Replied on January 17, 2019 at 3: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.