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 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 if you are viewing the form on mobile, the config list widget doesn't automatically fit into its frame container. 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.

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 to fit on mobile and desktop.

Here's how it looks on mobile:

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

@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 0;} #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: 40%; box-sizing: border-box;} .mobileColumnName + input, .mobileColumnName + textarea, .mobileColumnName + select, .mobileColumnName + .radio-container, .mobileColumnName + .checkbox-container, .mobileColumnName + .dateContainer {width: 60%; display: inline-block; box-sizing: border-box; vertical-align:top; box-shadow:none;} .buttonsColumn {text-align: right;}
}

Here's how:

a. Click the Configurable list widget field
b. Click the wand icon to open its properties
c. Go to Custom CSS tab and paste the CSS codes
e. Click Update Widget to save the changes

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




How to make it responsive in all devices including desktop?

If you want to make the configurable list widget responsive in all devices, 

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

iframe[src*="configurableList"] {width: 100% !important;}

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

Send Comment

7 Comments...

  • Aaron Oswald

    Hi there. Just a quick thanks for posting the CSS for mobile responsive.
    Works great!

  • Clintluna

    Hi, Can you just copy/past what the correct code would be to make the configurable list workable "on all devices"? (The code to make it mobile compatible makes the list vertical, but I want it to be horizontal on a laptop to make it more compact and then stack vertically only when necessary, eg. on a mobile device).

    I tried a few times with the instructions above, but it's not working and not sure if I'm just misinterpreting something.

    Would be very helpful if you could do that.

    Thanks!!

  • Jacksper

    Even your demo form , can't be seen on our mobile devices

  • kate_garrett

    Thank you :)

  • specialpop

    Great! Exactly what I was looking for and everything works as advertised. Thanks for tweaking this widget. Hoping this modification can make into settings of the widget very soon. I keep finding more often than not that I have to use this widget in every form.

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