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.
Send Comment:
4 Comments:
Hi. I have added the css code as instructed above. I am getting the small screen version both on the Desktop and on the Mobile preview. Please let me know what I am doing wrong here:
Link:
Code:
@media screen and (max-width:480px){
#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;
}
}
Yes its working..Thanks but the required feature of the fields are gone. I mean the feature is working ..but the required mark (* ) is gone ...But I need to show my customers the mark. Please guide me on this.
I marking fields as required while configuring. However by applying this CSS I'm loosing this required property. Could you please help me in marking these fields as Mandatory ??
Is it possible to perform calculations in the configurable widget? For example a product list: product, quantity, unit value and total value as quantity x unit value.