I can't configure my list.

  • podzsonia
    Asked on November 8, 2019 at 12:25 PM

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

  • Ivaylo JotForm Support
    Replied on November 8, 2019 at 2:16 PM

    Which form are you referring to?

    Have you embedded the form on a website? If so, please provide the URL.

    Please provide the link or the name of your form, so we can test it and further investigate.

    We will wait for your response.

  • podzsonia
    Replied on November 8, 2019 at 2:53 PM

    https://form.jotform.com/93114187780157


    At the bottom of the section called 'Product Info,' the box fields are extended in a long horizontal way, and I'm configure it in a vertical way so that the respondent won't have a hard time trying to swipe it on mobile.


    Hope that makes sense...

  • Ivaylo JotForm Support
    Replied on November 8, 2019 at 4:06 PM

    You should inject the following CSS code in the widget:

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

    Please delete all other CSS code from the form and inject this one.

    In order to inject the CSS code, you can follow this guide:

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    You can also clone and test my form from here:

    https://form.jotform.com/93116312063951

    Let us know if you need any further assistance.