Verification Widget causes display error on mobile

  • Profile Image
    fandila
    Asked on June 18, 2021 at 04:14 PM

    Hello, I noticed that when using the input verification widget I get the following display error on mobile version.

    1624047148_60ccfe2c64ff6_Bildschirmfoto

    Probably due to button width. Can this be set dynamically or do I need to just resize it to normal button size?
    Actually on my phone I'm not having this issue but maybe this may hint to other phones getting this display error.

  • Profile Image
    fandila
    Answered on June 18, 2021 at 09:07 PM

    When going to the next page on "Eingaben Überprüfen" on my phone I get this display error:

    1624064802_60cd4322b9ece_IMG_B250D363BB2

  • Profile Image
    Vick_W
    Answered on June 19, 2021 at 04:03 AM

    Hi there,

    I've tested your form on my Android phone and I do not see these visual errors. The buttons are showing correctly on the form. Please tell us the device name and model that you are using as well as the browser so we can test this further.

    Looking forward to your reply.

    Thanks

  • Profile Image
    fandila
    Answered on June 19, 2021 at 10:19 AM

    Hi,

    well, the first picture was obviously from the preview function in jot form and the second was from my iPhone 8 with Safari.

  • Profile Image
    roneet
    Answered on June 19, 2021 at 12:56 PM

    Are you seeing the error only on mobile devices?

    Can we test your form on our phone?

    https://www.jotform.com/form/211430885359864

    Looking forward to your response.

    Thanks.

  • Profile Image
    fandila
    Answered on June 19, 2021 at 01:02 PM

    Yes I am only having this on my phone, not on pc. Sure you can test in your phone, thank you.

  • Profile Image
    Billy_G
    Answered on June 19, 2021 at 07:48 PM

    Hello,

    Upon investigation, it appears that we need to inject a CSS code to prevent the items from going out of their container which I already did for your convenience.

    I injected this code:

      #previewContainer {
        padding: 0 !important;
      }
       
      #previewContainer ul {
    padding: 5px !important;
    }

    .form-all .form-submit-button {
    min-width: 30% !important;
    }


    1624146166_60ce80f6e785d_

    How it should look like

    1624146215_60ce8127e67b3_

    And here's how the preview looks like before submitting the form:

    1624146488_60ce8238e6248_

    Let us know if you need further assistance.

    Best regards,

  • Profile Image
    fandila
    Answered on June 20, 2021 at 02:25 PM

    Thank you very much.