How to Make the Configurable List Widget Mobile Responsive

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:

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:

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.