Issues with mobile version for Address form element

  • andrewsthomas1996
    Asked on June 28, 2020 at 3:39 AM

    Hello,


    I have been testing my form (https://www.jotform.com/build/201781407498159) and noticed that within the mobile version for address input, the state dropdown is "hidden" from the normal view within the form. If I hit tab, it does show up but just outside the form and then gets buggy as soon as I try to get back into the actual form scope. 


    I would love to be able to figure out how to make a new line between the city and state. Upon looking it up on the Jotform discussion forms, all refer to changing the embedded code, however, I would like to be able to modify it within Jotform considering downloading the source code would take away my ability to use the useful script tag that you have. 


    I have attached an image of exactly what I am talking about on the mobile version.

    15933299222020 06 28 (2) Screenshot 10

    Jotform Thread 2416693 Screenshot
  • Sonnyfer JotForm Support
    Replied on June 28, 2020 at 8:49 AM

    Hi there - I checked your form and it seems the State field is already appearing in the mobile view.

    1593348437mobx Screenshot 10

    I assume you already figured out the solution yourself.

    If you need further assistance, please let us know.

  • andrewsthomas1996
    Replied on June 28, 2020 at 1:12 PM

    Hi Sonnyfer,


    Thank you for reaching out quickly! I just ended up creating my own labels and used the US state picker widget as a workaround for the time being. 


    If there is a better way to handle the address form element, it would be great to not recreate them independently.


    Thank you!

  • John Support Team Lead
    Replied on June 28, 2020 at 2:34 PM

    Hello @andrewsthomas1996 - I just made a test on one of my forms and the STATE field is shown on mobile:

     Issues with mobile version for Address form element Image 10

    This should be shown by default, unless you intentionally remove it from the settings, or added a custom CSS code to prevent it from showing on mobile.

    Now, when I checked your form, I can see that you have "SHRINK" the address field. This prevents the STATE field from being shown on mobile. I suggest turning that off:

    15933692792416693 2 Screenshot 21


  • andrewsthomas1996
    Replied on June 28, 2020 at 4:57 PM

    That worked! Thank you so much, JohnRex!