-
Ultigraph1Asked 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 SupportReplied 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;
}
I hope this helps. If you have other questions or concerns, please do not hesitate to let us know.
-
Ultigraph1Replied 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 SupportReplied 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 SupportReplied 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.
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.
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;
}
}
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;
}
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.
-
Ultigraph1Replied 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 LeadReplied 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:
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.
-
Ultigraph1Replied on January 16, 2019 at 10:34 AM
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 LeadReplied 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:
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.
-
Ultigraph1Replied 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 SupportReplied 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.