Annotate Picture widget is cut off at the bottom

  • Profile Image
    HuttonSafetyGroup
    Asked on January 03, 2022 at 07:10 PM

    Hi there,

    we noticed that the annotate picture widget is cut off at the "Clear" button.

    You gave us some CSS code once but that doesn't work when the form is opened on different devices.

    iframe#customFieldFrame_64 {   height 362px !important;}


    Just wanted to let you know so you can fix it in general.


    Thank you



  • Profile Image
    Sonnyfer
    Answered on January 04, 2022 at 12:01 AM

    Hi there - Apologies for the inconvenience.

    Are you referring to this form? https://www.jotform.com/213535858099267

    I tested it on my Desktop's Google Chrome browser as well as in mobile and it seems to display properly.

    Mobile:

    1641272381_61d3d43ddbccf_

    Desktop - Google Chrome:

    1641272409_61d3d4593f0f4_

    Are you perhaps referring to a different form using a different device? Kindly share some more information so we can check. You can also provide screenshots for us to see the issue from your perspective.

    Guide: How-to-Post-Screenshots-to-Our-Support-Forum


  • Profile Image
    HuttonSafetyGroup
    Answered on January 04, 2022 at 01:08 PM

    Hi there,

    I am using the same form: https://form.jotform.com/213424990661256

    I have three different screenshots from my Mac and one from my phone.

    Screenshot from my MacBook Air using Chrome (Zoom: 100%):

    1641319444_61d48c14059e2_

    Screenshot from my MacBook Air using Chrome (Zoom: 110%):

    1641319550_61d48c7e72894_

    Screenshot form my MacBook Air using Chrome (Zoom: 80%):

    1641319593_61d48ca92f391_

    Screenshot from my iPhone 13:

    1641319624_61d48cc81c4a5_


    Thank you

  • Profile Image
    Jovanne_A
    Answered on January 04, 2022 at 05:16 PM

    Hi,

    I have checked your form on my end but I could not replicate the issue. I was able to see the form completely fine. Does the issue happen when you zoom the form?

    Please let us know so we can check further.

    Thank you.

  • Profile Image
    HuttonSafetyGroup
    Answered on January 04, 2022 at 06:33 PM

    Hi,

    As you can see in the screenshots above the form looks fine when I open it on the Chrome browser but when I start zooming in or out the widget starts cutting off.

    When I open the form on my phone the bottom line is cut off from the get go.


  • Profile Image
    Sonnyfer
    Answered on January 04, 2022 at 08:13 PM

    Sorry about that. Kindly allow me some time to check your form. I will be back shortly.

  • Profile Image
    Sonnyfer
    Answered on January 04, 2022 at 08:52 PM

    Thanks for patiently waiting. Kindly inject the below CSS code to each of your annotate widgets:

    .clearButton{
     margin-top: 10px ! important;
     margin-left: 0.2px ! important;
    }

    Guide: How-to-inject-CSS-codes-to-widgets/

    Result:

    1641347437_61d4f96ddac10_

    Let us know if you need further assistance.

  • Profile Image
    HuttonSafetyGroup
    Answered on January 05, 2022 at 03:06 PM

    Thank you very much for the fix.

    Will this issue be solved in the widget's backend one day? I imagine it is easier to fix it ones in the backend itself than have people ask for the code to fix it individually.


    Thank you


  • Profile Image
    Jovanne_A
    Answered on January 05, 2022 at 04:14 PM

    Hi,

    We will let our team know about this. Thank you for providing this input. For now, we can only offer you this alternative workaround. We will do our best to address this concern to avoid problems in the future.

    Thank you very much.