JotForm User Guide / Advanced Features /

How to Make the Configurable List Widget Mobile Responsive

How to Make the Configurable List Widget Mobile Responsive

The configurable list widget's default layout is horizontal. Unfortunately, if you have a narrow width form or if you are viewing the form on mobile, the config list widget doesn't automatically fit into its frame container. It is because this widget is not yet mobile responsive, however, this is already in the developers to do list. For the meantime, the following workaround will guide you on how to make the configurable list mobile responsive by injecting custom CSS codes into the configurable lists widget settings.

Here's an example problem showing the config list overlapping the form

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

Here's how it looks on mobile:

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

a. Open the Form Designer (click the blue circle icon found on the top right of the page)
b. Go to CSS tab
c. Paste the following CSS code
iframe[src*="configurableList"] {width: 100% !important;}

2. Copy the CSS codes below and inject it into your configurable list widget settings under Custom CSS tab. Make sure to replace the column labels in the code (text in yellow) with the column labels in your config list widget.
@media screen and (max-width:480px){
.checkbox, .radio {margin: 3px 0; min-width: 70px; } div#listContainer {background: #fff; } th {display: none; } td {float: left; margin: 6px 0 !important; display: block; min-height: none !important; box-sizing: border-box; } td:before {display: block } input[type=text], select, textarea {box-shadow: none; border-radius: 0; padding: 4px; } td[class*="col"]:before {width: 30%; float: left; font-weight: bold; } td {max-width: 620px; width: 100% !important; } td [name="input"], td > select, textarea {width: 68% !important; box-sizing: border-box; } img.calendarIcon {display: none; } .radio {width: 50%; float: left; } .buttonsColumn {min-height: 30px; } textarea {min-height: 120px; } .buttonsColumn {text-align: right; } table {border-collapse: collapse; } #list tbody > tr + tr + tr {margin-top: 22px; border-top: 1px solid #ccc; box-shadow: 1px 0 0 #ccc; } #list tbody tr td:first-child {padding-top: 20px !important; } input.stepper {width: 100% !important; }.radio-container {width: 70% !important; display: inline-block; } 

td.col1:before {
content: "Column 1 Label";
td.col2:before {
content: "Column 2 Label";
td.col3:before {
content: "Column 3 Label";
td.col4:before {
content: "Column 4 Label";
td.col5:before {
content: "Column 5 Label";

Here's how:

a. Click the Configurable list widget field
b. Click the wand icon to open its settings
c. Go to Custom CSS tab and paste the CSS codes
d. Edit the column labels (text in yellow) with the column labels in your config list widget. 
    If you have more than 5 columns, just add more of the following CSS and edit the column number as well as its label name. The number represents the order number of the column.

td.col6:before {
content: "Change Me";
td.col7:before {
content: "Change Me";

e. Click Update Widget to save the changes

2. That's it. Preview and test your form.

How to make it responsive on the desktop too?

If you want to make the configurable list widget responsive on the desktop, simply remove the first line @media screen and (max-width:480px){ and the last line } found in the above CSS codes (text in red).

For questions or clarifications, feel free to leave comments below.

Send Comment


  • communications_gsrv

    Even in your demo (and on my form), this code cuts off your add more button—which is the whole point of the configurable list. Please fix.

  • mitymom

    How can you edit each individual column width. For example, I'm making a row with 3 text fields. One field is for a 5 digit number, second is first name, and third is last name. I want the last name to be largest, first name to hold at least 25 characters, but the first column I want to be large enough for 7 characters maximum. Those columns plus the hidden Remove a Row button should fit the row which I edited to be 600 px wide. I've tied just about everything and cant get it. My project is due asap. please help.