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

    How to make MultiSelect Grid widget mobile responsive

    Asked by carterm1 on August 31, 2016 at 07:55 AM

    Hi, 

    Love the plugin, but i'm struggling with getting it to be responsive for use on mobile forms and inside apps. 

    Can you advise please, here is my form, https://form.jotform.com/62432085353957

     

    regards,

    Mick 

     

     

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

    JotForm Mobile apps MultiSelect Grid mobile responsive
  • Profile Image
    JotForm Support

    Answered by Boris on August 31, 2016 at 09:09 AM

    The MultiSelect Grid widget can be made mobile responsive, but it may still have some problems on really small devices (those having under 400 pixels of available width).

    To make this widget mobile responsive, we need to inject custom CSS both in the form, and inside the widgets themselves. Inside the form, we will be inserting this CSS:

    li[data-type="control_widget"] > .form-input { width: 100%; }
    .custom-field-frame[src*="//widgets.jotform.io/multiSelectGrid/"] { width: 100% !important; }

    What the code does is it makes sure that the iframe container of each widget will be taking 100% of the available horizontal space on form. As this space on your form is decreasing, so will the iframe automatically resize. You can add CSS into your form by following this guide:

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Or you can do it by opening up our Designer, and pasting the code in the Designer.

    The other code we will be adding should be added to each widget separately, by clicking on the widget's wand-shaped icon, and pasting it under the Custom CSS tab:

    th, td {
        min-width: 0;
    }

    Please try it out and let us know should you need further assistance. Thank you.

  • Profile Image

    Answered by carterm1 on August 31, 2016 at 10:02 AM

    Thank you, its sorted it perfectly.