Problem with viewing MultiSelect Grid on a mobile device

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.

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. 

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

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

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