Configurable List: How to display the widget properly on mobile devices?

Hi, 

I'm trying to fit my configurable list on the form. I've seen other do so through the CSS codes but I can't figure out how to apply them to the data I'm collecting. Please help! 

 

Thank you!

Alison 

Hi Alison,

I see this is your form http://www.jotform.us/form/60035283749155 with the Configurable List.

Allow me more time to work on it. I'll get back to you shortly.

Thanks.

 

Hi Alison,

I just realised that applying the custom CSS code to split the Configurable List widget into 2 will break the layout of the widget itself. This can result to unintended behaviour for the widget on different browsers.

For  the meantime, I was able to test on 2 options that might work for you.

#1 Make the form width wider -- max at 880px.

You can alter this using the Form Designer.

 

it should look like this demo form https://www.jotform.com/60617972354966

 

OR

#2 Use 2 Configurable list widget. Break down the fields/questions to 2 group.

like this form: https://form.jotform.com/60617613866966

 

Please let us know on your feedback on the 2 options I have provided for now. 

I will still work on the CSS option, but I need more time to compose the needed CSS code for it.

Thanks.

 

 

 

Hi Johnathan,

Thanks so much for your help. Option 1 would be the only one that would work for us as we need the peer leader's names to be attached to the rest of the information about them. If we change the width of the survey to 880px, is it still accessible via mobile? 

Thanks! 

The options to set the width to 880px will only display the widget properly on that resolution, if you load the form in a lowest resolution the widget will not be displayed properly, this is because it is loaded in a different manner than the normal fields (Text Boxes, Radio Buttons, Check Boxes). 

If you want to display it properly on mobile devices, you will need to follow the second workaround, please test loading the forms that my colleague shared you, it will help you to see the result with accuracy. 

 

Hi Kevin,

Unfortunately, the 2nd work around isn't an option for us. We need all of the information to be input at one time before loading the next "line" of the form. I've seen other forms where they were able to move questions to show up below other questions for the configurable list (See here: https://www.jotform.com/answers/632350-How-can-we-change-the-layout-of-our-configurable-list-to-have-it-all-fit-the-form-width). Is there a way to do this for our form? 

Thank you!

Alison 

Yes, that is possible to do, basically you will need to split the widget and show it in different lines and the data still will be added as it would be only in one line, you will not have to add two widgets. 

You only need to copy this CSS code and inject it in your form:

td.col5 {

    display: block;

    position: relative;

    top: 20px !important;

    margin-left: -1px;

}

td.col6 {

    display: block;

    position: relative;

    top: -41px !important;

    margin-left: 190px;

}

td.col7 {

    display: block;

    position: relative;

    top: -100px !important;

    margin-left: 400px;

}

td.col8 {

    display: block;

    position: relative;

    top: -100px !important;

    margin-left: 0px;

}

th {

    display: none;

}

.col1:before, .col2:before, .col3:before, .col4:before,.col5:before,.col6:before,.col7:before,.col8:before {

    font-weight: bold;

    display: block;

}

td.col1:before {

    content:"First Name";

}

td.col2:before {

    content:"Last Name";

}

td.col3:before {

    content:"Email";

}

td.col4:before {

    content:"Phone Number";

}

td.col5:before {

    content:"Attended summer retreat";

}

td.col6:before {

    content:"Adhered to Code of Ethics";

}

td.col7:before {

    content:"Earned B or higher in class";

}

td.col8:before {

    content:"Completed 2 or more of the following";

}

.d {

display:none;

}

th {

    display: none;

}

tr {

display: block;

}

You do not need to change anything else, follow this guide to inject it: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes. 

Take a look on my cloned form: https://form.jotform.com/60624381988971. 

Feel free to clone it.

Hope this helps.

Works perfectly! Thanks so much for your help! 

 

Great, you're welcome. 

Do let us know if you have more questions or need further assistance, we will be glad to help you.