Annotate Picture widget: icons are missing when uploading small images

Hi,

I am trying to use widget Annotate picture

but run into an issue when the image upload dimensions are to small, I guess?

A couple icons are "missing" and the "clear" button is cut off.

Here's the before and after screenshots...

Any help would be awesome!

Thanks!

I have checked your form and it seems the annotate widget is working correctly.

May we know if the form is embedded to a web page?

Can you please check your form again and let us know if the issue still remains?

You have to upload a small image, say 180x180.

This is just accessed using the jotform url directly.

You can see what happens in the second screenshot I provided above.

I am able to replicate the issue at my end.

It seems the widget is non-responsive.

You may add this custom CSS to make the widget's iframe to static width.

#customFieldFrame_5{
width:500px !important;
}

Guide:https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

I have also forwarded the issue to our back-end team for further investigation.

You will be notified via this thread once updates are available.

Almost good, the clear button at the bottom is still cut off.

And could we center the image area to give it a more "clean" look?

Thanks for your help with this!

As instructed I uploaded a small image and it was centered. 

Please re add the widget, upload the image and check if the image is not centered.

Regarding the Clear button getting cut off, I can see that the issue is escalated and we'll notify you once the issue is fixed via this thread.

Any word on the clear button getting fixed?

And I apologize for the confusion about centering the image. I meant the actual content box that holds the image... Can we center that to the "controls box" that is above it? (It aligns to the left when a smaller image is uploaded).

Thanks!

The bug report ticket is still open in our system. Unfortunately, there are no other updates as of this time.

You may try adding the next CSS to the widget in order to center the image and reduce the top margin of the clear button:

#canvas_container {
margin: 0 auto;
}
.clearButton {
margin-top: 8px;
}

We are sorry for the inconvenience caused to you. We have updated the widget and the problem has been resolved. Please check out the widget once again and let us know if the issue persists. Thank you for reporting the issue.

Regards,

Widgets Team