How to Make the Configurable List Widget Mobile Responsive

August 10, 2022

The Configurable List widget is a table-based layout designed horizontally. Tables don’t do so well with responsive design. So, if you have a narrow width form or view the form on mobile, the config list widget doesn’t automatically fit into its frame container. In the meantime, the following workaround will guide you on making the Configurable List mobile responsive by injecting custom CSS codes into the widget.

Here’s an example issue with the Configurable List:

configurable-list-overflow-x

The fields overlap the form width.

By injecting custom CSS codes, you can change the horizontal layout of the fields to vertical. This makes the fields responsive:

configurable-list-vertical-layout-min.png

To change its layout from horizontal to vertical, follow these steps:

First, copy the CSS code below and inject it into your Configurable List widget’s custom CSS box:

#list {
width: 100%;
border-collapse: collapse;
}
#list tbody:first-child > tr > td {
display: block;
padding: 6px 1px;
}
#list tbody:first-child > tr:first-child {
display: none;
}
#list tbody:first-child > tr + tr + tr {
border-top: 1px solid #ccc;
}
#list > tbody:first-child tr td.col1 {
padding-top: 20px;
}
.buttonsColumn {
text-align: right;
}
.mobileColumnName {
display: block;
padding-bottom: 4px;
box-sizing: border-box;
}
.mobileColumnName + input, .mobileColumnName + textarea, .mobileColumnName + select, .mobileColumnName + .radio-container, .mobileColumnName + .checkbox-container, .mobileColumnName + .dateContainer, .stepper-wrap input.stepper {
width: 100%;
display: block;
box-sizing: border-box;
box-shadow: none;
max-width: 320px;
}
input, select {
padding: 5px 5px !important;
}
.checkbox-container, .radio-container {
column-width: 240px;
max-width: 500px !important;
}
.checkbox, .radio {
display: flex;
flex-direction: row;
align-items: start;
}
.checkbox input, .radio input {
margin-top: 2px;
}

That’s it. Preview and test your form. Here’s a demo form you can check: https://www.jotform.com/213235228952051

If you want to apply the rule only on small screens, enclose the CSS above in the following code:

@media screen and (max-width:480px){
/*paste the code here*/
}

Change the value of max-width with your target screen size.

Was this guide helpful?
Contact Support:

Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:

Support Forum: https://www.jotform.com/answers/

Contact Jotform Support: https://www.jotform.com/contact/

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comments:

  • Sarmad Larik
  • Namrata Chakraborty
  • David Lopez
  • Vania Xavier