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 display the Configurable List widget properly in mobile devices?

    Asked by MartinCo on March 18, 2017 at 12:30 PM

    Hi,

    I've added Configurable widget, it's not showin well on mobile screens, just followed 

    https://www.jotform.com/answers/416834-Configurable-list-widget-on-mobile-devices

    https://www.jotform.com/answers/1049407-How-can-I-wrap-the-fields-in-configurable-list-widget-to-make-it-mobile-responsive

     

    but no use. Can you please suggest a appropriate code for the widget. You will see in my form, I've used widget multiple times; so I need that fixed :)

     

    Looking for help.

    Many thanks

     

    Page URL:
    https://form.jotform.me/70745086704459

    Screenshot
  • Profile Image
    JotForm Support

    Answered by Kevin_G on March 19, 2017 at 12:00 AM

    To display the widget properly in mobile devices, it's needed to inject some CSS code that will modify the widget's layout while viewing it on a mobile device. 

    The code explained below will need to be added between this mobile responsive code: 

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

    /* All given code here*/

    }

    Now, this part of the code is fixed: 

    th {

                display: none;

            }

     

            tr {

                display: block;

            }

    The next part of the code is to display each column title, you will need to add or delete classes based on the number of columns your widget has:  

    .col1:before, .col2:before, .col3:before, .col4:before,.col5:before {

     

                font-weight: bold;

     

                display: block;

     

            }

    If your widget would have 6 columns then you will need to simply add ".col5:before" to the code. 

    The next code is to show the column title again, it will change based on the number of columns you have too, example: 

    td.col1:before {

                content:"Pre-condition selection 1";

            }

    If you would have 6 columns then you will need to add until "td.col6:before" to set the proper title. 

    Now, with the next code you will display the fields one right below each other: 

    td {

                display: block;

                position: relative;

                top: 3px !important;

                margin-left: 0px;

            }

    You could also customize the given code to display the widget as desired. Also, all the code needs to be injected in the Inject CSS tab of the widget settings: 

    Hope this helps.