Incorrect image height on the widget "Draw on image" (iPhones)

  • Profile Image
    vitruvianmail
    Asked on July 13, 2019 at 05:35 AM

    Hi.

    Picture too long when screen too small.

    How to fix it?

  • Profile Image
    jherwin
    Answered on July 13, 2019 at 06:37 AM

    The image you uploaded is long, so the image on mobile devices is also long.

    Please try to resize the image and make it shorter. That may work.

  • Profile Image
    vitruvianmail
    Answered on July 13, 2019 at 06:52 AM

    It resized by width, but not by height. 

    Too long for the width.

    Must be scaled. 

    15630150537EBDDF30-8CD3-470F-AE88-3C8825

  • Profile Image
    jherwin
    Answered on July 13, 2019 at 08:30 AM

    Please try to inject the custom CSS code below to "Draw on Image" widget:

    #board {
    width: 100%;
    height:50%;
    overflow-x: scroll;
    overflow-y: hidden;
    }
    @media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){
     .drawing-board-canvas-wrapper,.drawing-board-canvas{
      height: 520px !important;
    }}

    Guide: How-to-Inject-CSS-Codes-to-Widgets

    Then inject the custom CSS code below to your form builder:

    @media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){
     .drawing-board-canvas-wrapper,.drawing-board-canvas{
      height: 520px !important;
    }
    div#board {
       height: 580px;
    }
    li#id_5,#id_6,#id_4 {
       top: -250px!important;
       position: relative;
    }
    .form-buttons-wrapper {

       top: -250px!important;
       position: relative;
    }}

    Guide: How-to-Inject-Custom-CSS-Codes

    Make sure you inject the CSS code separately. Please give it a try and let us know how it goes.

    Here's my demo form: https://form.jotform.com/91933292844970

  • Profile Image
    vitruvianmail
    Answered on July 14, 2019 at 03:53 AM

    Thank you for the answer.

    It works better, but not so good as needed.

    Picture must be scaled by height as good as it scaled by width by default.

    Also you can try rotate the phone orientation (problem with scaling too).

    The widget has the problem.

    May be better way try to fix the widget?

    Anyway, great thanks to you!

  • Profile Image
    roneet
    Answered on July 14, 2019 at 07:17 AM

    Allow me sometime to check the alignment in a cloned form.

  • Profile Image
    roneet
    Answered on July 14, 2019 at 07:56 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.

    The CSS provided by my colleague works fine in both landscape and portrait mode on mobile devices. If you are changing the orientation of the phone screen then I advise you to refresh the screen to draw on a fresh image then the image will scale properly on mobile devices.

    Let us know if you need more assistance.

    Thanks!

  • Profile Image
    vitruvianmail
    Answered on July 15, 2019 at 06:18 AM

    Thank you, but solution is not so fine.

    May be better way to test the widget with pic of any circle or square.

    Screenshot of the provided demo form.

    1563185860IMG_1417EA6A119C-1.jpeg

  • Profile Image
    roneet
    Answered on July 15, 2019 at 08:27 AM

    Could you please check my cloned Form if the height of the widget is ok for you.

    https://form.jotform.com/91953547439975

    I have injected the CSS code to reduce its height in phones.

    Let us know how this goes.

    Thanks.

  • Profile Image
    vitruvianmail
    Answered on July 15, 2019 at 09:22 AM

    Thank you, Roneet!

    Better, but too wide from now on.

    May you change pic on your demo form to this (square pic).

    https://static.tildacdn.com/tild3465-3135-4665-b132-363361366636/square.jpg

    More easy to scale.

  • Profile Image
    roneet
    Answered on July 15, 2019 at 10:05 AM

    I have updated the image on the cloned form https://form.jotform.com/91953547439975.

    Also, If sometimes the width doesn't adjust to the device screen you can simply refresh the page it will then adjust properly.

    Let us know how it goes.

    Thanks!