I need a custom CSS code to achieve the following

  • OPS_EE
    Asked on November 19, 2019 at 5:46 AM

    Hi, 

    I would like to achieve using the configuration list widget to achieve the following:


    1574160219Capture Screenshot 10

    However, the configuration List is in columns and not rows. 

    Could you kindly take a look at my form and assist please. 

    Essentially I would want to be able to create a list on an entry that users can input and add more entries as required. 

  • Girish JotForm Support
    Replied on November 19, 2019 at 7:56 AM

    Please add the CSS code below into the Custom CSS tab inside your 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;} 

    Related Guide: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets 

  • OPS_EE
    Replied on November 20, 2019 at 12:57 AM

    Is there a way I can include a file upload option under the configuration list? 
  • Kiran Support Team Lead
    Replied on November 20, 2019 at 4:43 AM

    The other question is moved to a separate thread and shall be addressed there shortly.

    https://www.jotform.com/answers/2047493

    Thanks!