How to Make the Configurable List Widget Mobile Responsive

September 15, 2021

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.

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.

Comment:

Podo CommentBe the first to comment.