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

Hi.

Picture too long when screen too small.

How to fix it?

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.

It resized by width, but not by height. 

Too long for the width.

Must be scaled. 

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

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!

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

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!

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.

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.

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.

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!