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

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

     

  • Profile Image
    Kevin_G
    Answered 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.