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

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

15 Comments...

  • podzsonia

    I can't configure my list. I copied and paste the CSS code, saved it, but it's still overlapped...

  • Roel1985

    Never mind works like a charm!

  • Roel1985

    Same here, still not responsive while i see the demo is responsive.

  • CoastEnvironmental

    I figured it out... I had an extra { at the beginning still.

    Works!

  • CoastEnvironmental

    I read through the comments but I still can't get my form to be responsive on all devices.

    I injected the following:

    @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;}
    }

    Then I tried the second set of instructions:

    {#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;}
    iframe[src*="configurableList"] {width: 100% !important;}


    This did not work for me.

  • JoaneMarlet

    Hi, Tried this one but the thing is, the headers are repeating.
    @media screen and (max-width:480px){
    #list tbody:first-child > tr:first-child {display: block;} #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: block; padding-bottom: 4px; width: 40%; box-sizing: border-box;} .mobileColumnName + textarea, .mobileColumnName + select, .mobileColumnName + textarea, {width: 60%; display: block; box-sizing: border-box; vertical-align:top; box-shadow:none;} .buttonsColumn {text-align: right;}
    }
    Please assist to check? Thank you.

  • food2soil

    This is great. Works very nicely
    Do you know how I can get the jotform report to show each column in a seperate cell? Right now if you build a report all columns under one question show up in a single cell in excel.

  • MDDC1908

    Hi, I can't get the form to be reponsive on all devices. I cut out the first and last line and pasted the additional CSS code on the first line, but it will not wrap on tablet or desktop preview. Can you post the entire CSS string to make it responsive on all devices?

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