Problem with viewing MultiSelect Grid on a mobile device

  • Profile Image
    cyaconference
    Asked 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.

  • Profile Image
    BJoanna
    Answered 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
    SC
    Answered 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
    Chriistian
    Answered 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
    Chriistian
    Answered 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