What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Problem with viewing MultiSelect Grid on a mobile device

    Asked by cyaconference on February 28, 2017 at 02:00 AM

    Hi, I'm having a problem with a multi select grid on a mobile device (I'm possibly pushing the widget beyond it's intended use).

     

    When I look at the table on page 3 for the "Saturday Editor Session" selection on an iPhone it's only displaying the first few columns and there's no way to get to the columns on the right of the grid. Is there a way round this that will allow the user to scroll right to get the rest of the information?

     

     

    Cheers

    Shaun.

    Page URL:
    https://form.jotform.com/70182257484964

  • Profile Image
    JotForm Support

    Answered by BJoanna on February 28, 2017 at 05:14 AM

    MultiSelect Grid widget is not mobile responsive. I tested your form and I was able to replicate mentioned issue. When form is viewed on mobile device only first three columns are shown. 

    I found one thread where my collage Boris provided workaround how to make MultiSelect Grid widget responsive with CSS. https://www.jotform.com/answers/921082 

    Please follow the steps provided on that thread, to see if you can resolve your issue.

    If that does not help you then try to add this code to your form:

    #id_7 {

        width : 1050px!important;

    }

    This code will set the fix width of mentioned field and your user will be able to scroll to the right and all columns will be shown. 

    How to Inject Custom CSS Codes

     

    Hope this will help. Let us know if you need further assistance. 

  • Profile Image

    Answered by SC on February 28, 2017 at 07:16 PM

    I think I've done this as per the instructions but it hasn't sorted the problem for me. 

  • Profile Image
    JotForm Support

    Answered by Chriistian on March 01, 2017 at 02:01 AM

    I'm currently checking the Multi Select Grid widget on your form. Please allow me sometime to further investigate. I'll get back once I've found results.

    Regards

  • Profile Image
    JotForm Support

    Answered by Chriistian on March 01, 2017 at 04:55 AM

    Hi again,

    Unfortunately, I was't able to find the custom CSS for the Multi Select Grid widget to be mobile responsive. Alternatively, I would suggest is that you add a horizontal scroll bar in order to view the whole table on mobile screen.

    Please add this custom CSS on the widget settings:

     

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

    div#gridContainer {

        overflow-x: scroll;

    }

    }

     

    Hope this helps.

    Regards