Why is Image Checkboxes Widget redundant space and not dispaying on some mobile devices?

Dear Team,

I've been trying to create a responsive multiple choice with image and meet some issues after applying it.

1. Desktop - Redundant Space

Please see attached video, the page link is also attached below.

https://drive.google.com/open?id=1uTK5HJvyBuet5zZBMGjUjGcUgteSo003

2. Mobile not displaying

The widget is not displaying on my Sony mobile, Android version 7.1.1

3. Responsiveness

Is there a way to enforce the blocks to flow naturally? For example, align 3 blocks per row on desktop view and 2 blocks per row on mobile view.

Thanks a lot for the help.

1. Desktop - Redundant Space

Please see attached video, the page link is also attached below.

https://drive.google.com/open?id=1uTK5HJvyBuet5zZBMGjUjGcUgteSo003

I checked on the link you shared and I was able to replicate the same. however when accessing the form directly using the link: https://jotform.me/80680322784459 i was not able to replicate the same error. This lead to my conclusion this is due to the method of embed you have used. Kindly try using Iframe embed method as this method is not affected by javascript conflict which may cause such errors on your form. 

https://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

https://www.jotform.com/help/67-Which-Form-Embed-Code-Should-I-Use 

2. Mobile not displaying

The widget is not displaying on my Sony mobile, Android version 7.1.1

Kindly allow us time to get same device we can test and find a solution for you. Apologies for any inconveniences caused.

3. Responsiveness

Is there a way to enforce the blocks to flow naturally? For example, align 3 blocks per row on desktop view and 2 blocks per row on mobile view.

Unfortunately this is not possible as the widget will pick the pattern you have used and replicate the same even on mobile device only this time it will optimise the arrangement for mobile devices.

Thanks for the update, seems there's javascript conflict as you suggested, the Image Checkboxes widget has iFrame in itself, and it has a problem setting the height. Embedding with iFrame further extend the issue even further. The conflict takes place on iFrame, the javascript set the height attribute higher than the total height of the content.

Not to mention the form can't scroll in IOS.

While the form works independently, like in a simple page, I will move the form to a separate page if the conflict can't be solved.

Thanks for the update, seems there's javascript conflict as you suggested, the Image Checkboxes widget has iFrame in itself, and it has a problem setting the height. Embedding with iFrame further extend the issue even further. The conflict takes place on iFrame, the javascript set the height attribute higher than the total height of the content.

I have checked your Iframe code and noticed you have set height to  height: 2151px;" which in my opinion is very high. Kindly inject the following css code to your form test and let us know if issue is resolved.

#id_33{

    border: none;

    width: auto;

    max-height: 730px;

}

The above code should fix the issue on your form when embedded to your website.

Not to mention the form can't scroll in IOS.

I have seen your iframe embed has scroll set to "no" as indicated in red. kindly change this to yes test and do let us know if scroll issue is resolved.

<iframe title="Product Inquiry - Clothing (EN)" src="" allowtransparency="true" allowfullscreen="true" name="80680322784459" id="80680322784459_1520878721105" style="width: 10px; min-width: 100%; display: block; overflow: hidden; border: none; height: 2151px;" scrolling="no"></iframe>