What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Error - form resizing on mobile

    Asked by iceman2480 on December 29, 2015 at 05:12 PM

    I added the image picker widget to my form: Boxx Club Style Profile.

    When a user is on mobile and attempts to proceed to the next page without picking an image, the widget errors correctly.  However, the mobile browser window is resized to fit the width of the error text, thus cutting off choices from the image picker widget.  The user cannot scroll to see the additional choices while in portrait mode.  The choices become available if the user changes to landscape mode on the phone.  

    Please advise how we can address this issue.

    Page URL:
    https://form.jotform.com/53615346647158

    style
  • Profile Image
    JotForm Support

    Answered by Kevin_G on December 29, 2015 at 08:37 PM

    Hi,

    Thank you for contacting us.

    To display the widget properly, just paste this CSS code in the Designer : 

    @media only screen and (max-width: 40em){

        iframe {

            width : 375px !important;

            height : 300px !important;

        }

     

    }

    And paste this CSS code on each widget in your form : 

    @media only screen and (max-width: 40em){

        .imageContainer.blocks {

            width : 130px !important;

        }

    }

    Also, change the width of each widget to 600px

    Take a look to my cloned form here : https://form.jotform.com/53627790931968

    Only the first widget is configured as you need.

    Let us know if it works for you.

    We will wait your response.

  • Profile Image

    Answered by iceman2480 on December 30, 2015 at 04:06 PM

    I am still having the issue; but, I've opted to use a workaround instead.  I trimmed the number of images from 4 to 3 and have restricted the width of the widget.  So, if the error for required field appears, it will be roughly the same width as the widget with 3 images.

    I no longer require a response to this issue; but, I think it would be good to review the "responsiveness" of the image picker widget when an error occurs on mobile.

  • Profile Image
    JotForm Support

    Answered by EltonCris on December 30, 2015 at 08:45 PM

    We are glad that you found a workaround. I believe this just requires basic CSS in order to correct the problem but since your form is now looking great, we'll leave this as it is. We will use your review to improve this widget.

    Thank you!

  • Profile Image
    JotForm Support

    Answered by EltonCris on December 30, 2015 at 08:58 PM

    By the way, I just made a test and can't reproduce the problem when iframe width is set to 100%. If in case you want to use 4 images again, you can try the following.

    Try to replace my colleague's CSS codes with this. Follow the same guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    @media only screen and (max-width: 40em){

        iframe {

            width : 100% !important;

        }

    }

    Hope this helps!