- Templates
-
Integrations
- INTEGRATIONS
- See 100+ integrations
-
- FEATURED INTEGRATIONS
-
PayPal
-
Slack
-
Google Sheets
-
Mailchimp
-
Zoom
-
Dropbox
-
Adobe Sign
-
Google Calendar
-
Hubspot
- See more
- Products
Using Configurable List widget; need to separate data into separate lines
-
karenhassellAsked on May 27, 2017 at 07:09 PMI am using the configurable list to add multiple presenters to a conference proposal form.
As you can see, the list extends beyond the edge of the form and looks silly.
What I would like: title, first name and last name on one line. Name of Institution on a second line. Role on a third line. Email on a fourth line.
Is this possible?
Thanks in advance for your help.
-
KevinAnswered on May 27, 2017 at 07:29 PMJotform SupportYes, it is possible to display the widget in multiple lines, but some CSS code is required. Please, allow me some time to work on the needed CSS code, I will get back to you as soon as possible.
-
karenhassellAnswered on May 27, 2017 at 08:43 PMthank you so much!
KH
Karen Hassell, Ed.D.
Educational Consultant
karen.hassell@icloud.com
254-722-7550
... -
KevinAnswered on May 27, 2017 at 09:00 PMJotform Support
Please, inject this code to your widget, that will display the widget fields like you want:
th {
display: none;
}
tr {
display: block;
}
.col1:before, .col2:before, .col3:before, .col4:before,.col5:before,.col6:before,.col7:before {
font-weight: bold;
display: block;
}
/* Naming the fields*/
td.col1:before {
content:"Title";
}
td.col2:before {
content:"First Name";
}
td.col3:before {
content:"Last Name";
}
td.col4:before {
content:"Institution";
}
td.col5:before {
content:"Role";
}
td.col6:before {
content:"Email";
}
td.col7:before {
content:"Confirm email";
}
/* Positioning the fields in multiple columns*/
td.col4 {
display: block;
position: relative;
top: 3px !important;
margin-left: 0px;
}
td.col5 {
display: block;
position: relative;
top: 3px !important;
margin-left: 0px;
}
td.col6 {
display: block;
position: relative;
top: 2px !important;
margin-left: 0px;
}
td.col7 {
display: block;
position: relative;
top: -38px !important;
margin-left: 127px;
}
td.col8 {
display: block;
position: relative;
top: -62px !important;
margin-left: 255px;
}
button.add {
position: relative;
margin-top: -45px;
display: block;
}
To add the code to the widget, simply click on the field, wizard icon and paste the code under the Custom CSS tab:
Here's my cloned form of yours where you can see how the code will work: https://form.jotformpro.com/71467501018956
Hope this helps.
-
karenhassellAnswered on May 27, 2017 at 10:43 PMThis is EXACTLY what I wanted. Thank so very much!
Please pass along my thanks!
KH
Karen Hassell, Ed.D.
Educational Consultant
karen.hassell@icloud.com
254-722-7550
... -
KevinAnswered on May 27, 2017 at 11:13 PMJotform Support
You're most welcome Karen.
I'm glad to know it worked as you wanted.
Please, if there is anything else that we can assist you, do let us know, we will be happy to help.
