How to change the size of Preview Image in Image Upload Preview Widget?

  • ellie123
    Asked on September 26, 2014 at 12:25 PM

    I am using the Image Upload Preview Widget on my form, but when a user is on their mobile device the huge previewed image does not look good.

    Where can I change this so the preview image is 100px x 150px? Or a percentage may even be better (i.e. 20%)

    It looks like the element is <img id="preview">

    I tried in the width and height settings but that only changes the width of the preview image and not the height.

    Thank you!

  • Ben
    Replied on September 26, 2014 at 2:50 PM

    Hi Ellie,

    You were right about the field that you would need to change, but as it had its own default settings applied directly onto it (inline style) we needed to make the change more important than it.

    This is the CSS that would shrink the preview to a size.

    #preview
    {
       width:150px !important;
    }

    You can see it in action here http://form.jotformpro.com/form/42685922562967

    To add the style you should follow these steps:

    How to change the size of Preview Image in Image Upload Preview Widget? Image 1 Screenshot 30

    How to change the size of Preview Image in Image Upload Preview Widget? Image 2 Screenshot 41

    I hope this helps you to accomplish what you wanted. You can of course change the width to any other from 150, to for example 200.

    Best Regards,
    Ben