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:

Here’s how it looks on mobile:

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:

@media screen and (max-width:480px) {
#list tbody:first-child > tr:first-child {
display: none;
}
#list {
width: 100%;
border-collapse: collapse;
}
#list tbody:first-child > tr > td{
display:block;
padding: 6px 1px;
}
#list tbody:first-child > tr + tr + tr {
border-top: 1px solid #ccc;
}
#list > tbody:first-child tr td.col1 {
padding-top: 20px;
}
.mobileColumnName {
display: inline-block;
padding-bottom: 4px;
width: 50%;
box-sizing: border-box;
}
.mobileColumnName + input, .mobileColumnName + textarea, .mobileColumnName + select, .mobileColumnName + .radio-container, .mobileColumnName + .checkbox-container, .mobileColumnName + .dateContainer {
width: 100%;
display: inline-block;
box-sizing: border-box;
vertical-align:top;
box-shadow:none;
}
.buttonsColumn {
text-align: right;
}
}

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

How To Make It Responsive on All Devices Including Desktop?

If you want to make the configurable list widget responsive on all devices…

a. Remove the first line @media screen and (max-width:480px) { and the last line } found in the above CSS code.

b. Inject the following custom CSS code on your form:

[data-widget-name="Configurable List"]>iframe {
width:100%!important;
}

Guide to Inject: How to Inject Custom CSS Codes.