How to display the Configurable List widget properly in mobile devices?

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

 

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.