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

    How to make the Draw on Image widget mobile responsive?

    Asked by fadesign on April 27, 2016 at 03:00 AM
    However, I am still having the same problem with the "draw on image" plugin.

    I think it is due to the size of my image.  Is there a way I could set up a different image for a certain resolution?  I could photoshop the 4 jackets in a "one after another" position.

    https://form.jotform.com/61168140352246

     

    draw on image responsive image
  • Profile Image
    JotForm Support

    Answered by Boris on April 27, 2016 at 05:47 AM

    Unfortunately, the Draw on Image needs its image to be of fixed (unchanging) size in order for the drawn image to be correctly positioned. If we applied regular CSS to shrink / resize the image into making the image appear mobile responsive, the drawing of the user would no longer be exactly positioned.

    It can be imagined as such that, when the size of the background image is constant, when user draws something over the sleeve - the drawing can correctly be placed over the sleeve in your submissions.

    However, if the background image was made responsive and it resized itself according to the screen size of the device, while user would think that they are drawing over the sleeve, the actual drawing would actually be made on another part of the image - not on the sleeve.

    This means that the image must be presented in its full size, even if that size is larger than the mobile device screen. What you can do to work around this limitation is to force the Draw On Image widget to display a horizontal scrollbar when the screen is not wide enough to display the full image.

    We can do that by adding the following custom CSS to the widget:

    #board {
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    }
    .drawing-board-canvas-wrapper, .drawing-board-canvas {
    width: 520px !important;
    }

    We can add this CSS to the widget by clicking on its wand-shaped icon, then on the Custom CSS tab, and pasting it there:

    This will add a horizontal scrollbar, so that users on narrow screens can still scroll the image to the right:

    Please try it out and let us know if this will work to your satisfaction.

  • Profile Image

    Answered by fadesign on April 27, 2016 at 10:33 AM

    You guys are on it!

    For some reason I see no change on my iPhone 6

    I am starting to wonder if it wouldn't be simpler to add an extra line of text under the label that stated:"mobile users should use landscape mode"

    https://form.jotform.com/61168140352246

     

    Thank you so much!

  • Profile Image
    JotForm Support

    Answered by Kiran on April 27, 2016 at 11:59 AM

    I'm checking the issue to view the form on iPhone. Please allow me some time to check on it and get back to you with relevant information. 

    Thank you for your patience.