Realignment of boxes in Configurable List

  • Profile Image
    Asked on September 29, 2022 at 02: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!

  • Profile Image
    Answered on September 29, 2022 at 05: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
    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

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