-
seriesone18Asked on September 20, 2018 at 5:28 PM
I have multiple sections in my configurable list, is it possible to display it in two rows or is there any other way to fit that into the form page.
https://form.jotform.com/82624994336164
Thanks
-
jonathanReplied on September 20, 2018 at 6:57 PM
Please review the user guide: How to Make the Configurable List Widget Mobile Responsive
You need to inject this custom CSS codes on the configurable list 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;}
and these on the form custom CSS codes.
iframe[src*="configurableList"] {width: 100% !important;}
---
You can see it working on my demo form https://form.jotform.com/82626871766975
Let us know if you need further assistance.
-
seriesone18Replied on September 21, 2018 at 10:56 AM
Thanks ! Very helpful
However, not sure where I should plug this
'' and these on the form custom CSS codes.
iframe[src*="configurableList"] {width: 100% !important;}''
Can you provide a screenshot ?
-
Support_Management Jotform SupportReplied on September 21, 2018 at 12:00 PM
Those codes will be injected on the form itself.
Complete guide: How-to-Inject-Custom-CSS-Codes