User Guide

 

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 on its frame container. In short, it is not mobile responsive.

The following workaround will guide you on how to make the configurable list mobile responsive by injecting custom CSS codes.

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.
.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: "Your Label Here";
}
td.col7:before {
content: "Your Label Here";
}

e. Click Update Widget to save the changes


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


If you need clarifications, feel free to leave your comments below.

Send Comment

1 Comment...

  • 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.