Form gets cut off in moile device.

  • Mittleman
    Asked on October 27, 2015 at 7:45 PM

    If I go more than 5 wide, anything in the sixth row gets cut off (using mobile).  Any wrap around feature or way to shrink column font.  tks

  • Ashwin JotForm Support
    Replied on October 28, 2015 at 1:14 AM

    Hello Mittleman,

    I am not sure if I have understood your question correctly.

    I did check your last edited form and found that you have 5 form collapse fields. Do you mean to say that the 6th form collapse if added is not being displayed in mobile devices?

    Have you embedded this form in any webpage? Please share the webpage URL and we will take a look. You may also like to share a screenshot on how the form is displayed in your mobile device. The following guide should help you how to upload image in forum post:  http://www.jotform.com/answers/277033 

    We will wait for your response.

    Thank you!

  • Mittleman
    Replied on October 28, 2015 at 7:45 AM
    Yes, need display of 6th. I created these fields in your software, nothing external. Also we don't need to display on a phone, just tablet and pc.
    Maybe the mobile widget is not the one to use? On a regular pc the 6th column is barely visible. Although in the past I have removed the mobile widget and nothing happened. Help!!
    ...
  • mert JotForm UI Developer
    Replied on October 28, 2015 at 9:13 AM

    Hi,

    Yes, there are several other methods except the widget to make your form mobile responsive. For the quick solution to beat this problem, you can give mobile responsive ability to your form by simply following the tutorial from the link below:

    http://www.jotform.com/help/311-How-to-make-Forms-Mobile-Responsive

     

    If it won't work, you can try to inject some custom CSS to your form for making it mobile responsive. This method is the more advanced one to solve this issue.

     

    To do that,

    Add the following custom CSS code to your form by using the method above.

    /*-----------RESPONSIVE LAYOUT-----------*/

     

    .form-line.form-line-column {

    width: 100% !important;

    margin-left:0

    }

     

    .form-line{

    width: 100%;    

    }

     

    .form-textarea,

    .form-textbox,

     

    .form-dropdown{

    width: 100% !important;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    }

     

    .form-label-left, .form-label-right{

    width: auto !important;

    }

     

    .form-buttons-wrapper{

    margin-left:0 !important;

    }

     

    .form-input {

    width: 100% !important;

    }

     

    .form-all{

    width: 75% !important;

    }

     

    .form-sub-label-container {

    width: 100% !important;

    display: block  !important;

    } 

     

    Apart from them, you can make your fields closer in the "Designer". You need to open the "Designer" and adjust the "Line Spacing" value in the "Line Layout" tab.

    Form gets cut off in moile device Screenshot 20

     

    Please, try this methods and let us know the final state.

    Thanks.

  • Mittleman
    Replied on October 28, 2015 at 11:28 AM

    Still not working. even if I remove all mobile related features, the 6th column is still only partially viewable.

  • Mittleman
    Replied on October 28, 2015 at 11:45 AM
    New response received
    With or without mobile response, the last column still partially appears
    vs. fully appearing
    Thank you very much.
    *Mike Mittleman*
    Vice President of Client Relations
    Kilowatt Financial, LLC
    ...
  • Ashwin JotForm Support
    Replied on October 28, 2015 at 1:02 PM

    Hello Mike,

    I did check you form #53005095063144 and found that it only has 2 form collapse. I also checked your other form "Test onboarding" which has 4 form collapse and it seems to be displaying correctly in different screen sizes. 

    Can you please share the screenshot of the form how it look in your tablet and we will take a look. The following guide should help you how to upload image in forum post:  http://www.jotform.com/answers/277033 

    We will wait for your response.

    Thank you!

  • Mittleman
    Replied on October 28, 2015 at 2:59 PM

    Form https://form.jotform.com/52997075630161 is the main problem.  One section has 5 pull down menus in which even on a full screen computer get cut off.

     

    This is the only form I would like to address.  If it doesn't fit on a PC, then we aren't  at tablet stage yet.  Help!!!

  • David JotForm Support Manager
    Replied on October 28, 2015 at 5:58 PM

    It show cut off on desktop because you need to increase the width of you form:

    Form gets cut off in moile device Screenshot 20

    Then try injecting this CSS code inside the configurable list widget custom CSS area:

    @media only screen and (max-width: 480px) {

     

    table#list.horizontal{

     

    width: 90% !important;

     

    -webkit-box-sizing: border-box;

     

    -moz-box-sizing: border-box;

     

    box-sizing: border-box;

     

    }

    }

    Hope this helps.

     

  • Mittleman
    Replied on October 28, 2015 at 8:12 PM

    I increased the width and all is good.  Thank you so much!!!!!

  • Ashwin JotForm Support
    Replied on October 29, 2015 at 12:57 AM

    Hello Mike,

    On behalf of my colleague, you are welcome. I am glad to know that your issue is resolved. 

    Do get back to us if you have any questions.

    Thank you!