Form column: Form shifts to left in mobile view.

  • MaidCrew
    Asked on October 15, 2018 at 8:33 AM

    Hi... are y'all aware that when a form has "columns" activated to allow for 2 or 3 columns, the form, on a mobile or tablet, shifts to the left by about 40px?

    I've run multiple scenarios to see if it's element specific or if it's only when columns are activated within the advance designer mode, and it only seems to happen when activating columns regardless of which elements you're trying to render in columns on same line.

    Also, once columns are activated, if you delete the elements and/or deactivate the columns feature, the issue still remains... the only way I've been able to clear the issue is by reverting to an earlier version prior to activating the columns feature.

    Any help or insight would be appreciated.

  • Ashwin JotForm Support
    Replied on October 15, 2018 at 10:55 AM

    I am not sure if I have understood your question correctly. I did create a demo form and enabled form column in the form to display form fields in two columns. Please check the screenshot below:

    1539615195formColumn Screenshot 10

    It does seems to display margin on right? Can you please check the above screenshot and confirm if this is issue you are having?

    Do get back to us on this and we will report it to our backend team.

    We will wait for your response.

  • MaidCrew
    Replied on October 15, 2018 at 12:39 PM

    Yes, this is the issue... it's not just that there's a margin on the right.... the margin is enlarged or something is pushing the form to the left.  If you didn't have columns activated, the right margin your arrow is pointing to would be half that wide & the left margin would match/show.

  • Welvin Support Team Lead
    Replied on October 15, 2018 at 2:25 PM

    Would you mind sharing us the form where this happens? Perhaps, it's the field positioning where you need to move fields to the next row/line:

    https://www.jotform.com/help/328-How-to-Position-Fields-in-JotForm 

    Form column: Form shifts to left in mobile view. Image 10

    But I've inspected your form here https://www.jotform.us/form/63443520962152 and I see that the form size is reduced to 94% on mobile views and the padding has been adjusted as well. Please note that these adjustments will have an effect on how the overall form will be displayed/shown on mobile devices. 

    15396278992018 10 16 002 Screenshot 21

    15396279212018 10 16 003 Screenshot 32


  • MaidCrew
    Replied on October 15, 2018 at 4:25 PM

    Thank you for attempting to figure out which form but this is on all forms I've played with, it's not one specific form.  Created multiple forms from scratch & it happens on all forms whenever I activate columns through the advance designer. It also doesn't matter whether columns are set at 2 or 3 columns... the same issue arises. This is the most recent one I've created:

    https://form.jotform.com/82833237184157

  • Kevin Support Team Lead
    Replied on October 15, 2018 at 6:58 PM

    I have been testing this and I cannot replicate the issue shown on Ashwin's screenshot, I have two forms, one with fields displaying under the default layout and the second one displaying the fields inline, here is the result: 

    https://form.jotform.com/82876750506970 

    1539644099screenshot 01 Screenshot 10

    https://form.jotform.com/82877330806968 - This one has the fields displaying in two columns: 

    1539644164screenshot 02 Screenshot 21

    I have also checked the form you have shared and this is how it looks: 

    1539644188screenshot 03 Screenshot 32

    May you please confirm you're  positioning the fields as explained on the guide my colleague Welvin shared?

    Please also kindly check the forms I have provided and let us know if the same issue happens. If possible, share us some screenshots about how the forms look on your end, since attached images via email replies are not posted on this thread you will need to follow this guide to upload the images:  https://www.jotform.com/help/438-How-to-Post-Screenshots-to-Our-Support-Forum 

    We will wait for your response.  

  • MaidCrew
    Replied on October 16, 2018 at 11:03 AM

    The form I referenced.... make a copy for yourself.

    1. Add two short text elements & then shrink them both so they show up on same row/line (on a desktop).

    2. View on an actual mobile device (I've viewed on a Pixel 2 & a tablet)... you'll notice nothing happens with the right margin... both left & right margin on screen show a slight space/padding.

    3. Go into Advance Designer & activate columns (2 columns).

    4. View on mobile again (don't try previewing within the Jotform preview mode), view on an actual mobile device and you'll see that the form shifts to the left so you can't see the left margin anymore... and the right margin is twice as wide now.

    Tell me if you can't duplicate the issue.

    Thanks.

     

  • Ashwin JotForm Support
    Replied on October 16, 2018 at 12:05 PM

    I remember I was able to replicate the issue earlier. I will test this issue again and report it to our backend team.

    I will get back to you on this soon.