Realignment of boxes in Configurable List

  • eskayefhrpd
    Asked on September 29, 2022 at 2:11 AM


    I added a Configurable List in my form and by default the options are arranged horizontally. I just need the CSS code or any other way to align them vertically.

    Thank You!

    Realignment of boxes in Configurable List Image 1 Screenshot 20

  • baranmarap Jotform Support
    Replied on September 29, 2022 at 5:45 AM

    Hello eskayefhrpd,

    Thanks for reaching out to JotForm Support. It’s really easy to do that using our Custom CSS feature. Let me show you how:

    1. Go to the Widget Settings on your Configurable List widget and click on the Custom CSS Panel.1664444670 633568feef24b Screen Shot 202 Screenshot 10
    2. Paste the following CSS code to the Custom CSS panel and click on Update Widget button.
    #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;

    1664444736 63356940c4d1b Screen Shot 202 Screenshot 21

    That’s it. Give it a try and let us know if you need any help.