Users are unable to add a new row in the configurable list widget when using smartphone or tablet

  • Profile Image
    Sarede
    Asked on August 22, 2017 at 12:49 PM

    Hi, 

    For of the forms I've created (direct link on my website here: http://www.bringthegymtome.com/invoice.html) - I've been getting feedback from a lot of people that I send it to that while they have no trouble filling out the form when they do so from a computer or laptop, however when they try to fill it out via cellphone or tablet, they have issues in being able to fill it out correctly. One main issue is that they are unable to successfully add more than 1 line if needed.

     

    Please advise how this can be fixed. 

     

    Thanks!

  • Profile Image
    Welvin
    Answered on August 22, 2017 at 01:50 PM

    Although the form is not 100% responsive on mobile due to the configurable list widget, the widget allows me to add a new set of rows. I can do this on both Android and IOS devices.

    You are using our Weebly app, so there should be no issue with it since the form is loaded in an iframe. Did your form users send you a screenshot of the problem? If yes, would you mind sending it to us? Here's a guide on how you can post a screenshot to this thread: 

    https://www.jotform.com/help/438-How-to-Post-Screenshots-to-Our-Support-Forum 

    Do you also know what are the devices they are using? 

    Would you also mind if there are other issues in the form? That way, we can also help you resolve it. 

  • Profile Image
    Sarede
    Answered on August 23, 2017 at 01:11 PM

  • Profile Image
    Sarede
    Answered on August 23, 2017 at 01:13 PM

    That is an example of a screenshot from her cellphone showing how she wasn't able to submit the form. Please advise. 

  • Profile Image
    Kiran
    Answered on August 23, 2017 at 02:05 PM

    I notice that the issue is occurring due to the page is not horizontally scrollable to enter the information on the required fields displayed to the right.

    Please try injecting the following CSS code to the Custom CSS section of the Configurable list widget to display the fields in two lines while viewing on mobile devices.

    @media screen and (min-width: 10px) and (max-width: 540px){

    th { display: none; }

    td.col1, td.col2, td.col3, td.col4 {

    display:inline-block;

    float: left;

    padding: 20px 5px 1px 1px;

    }

    td.col1:before { content: "Date"; width: 40%; font-weight: bold;}

    td.col2:before { content: " Name of Client"; width: 40%; font-weight: bold;}

    td.col3:before { content: "Time"; width: 40%; font-weight: bold;}

    td.col4:before { content: "Amount Due"; width: 40%; font-weight: bold;}

    td.col1 { width: 60%; }

    td.col2 { width: 35%; }

    td.col3 { width: 45%; }

    td.col4 { width: 35%; }

    }

    The form should be displaying the configurable list widget as shown below:

    Hope this information helps!