-
lindsayjayecoxAsked on October 30, 2017 at 4:15 PM
Hello, my configurable list is too long for my form. I would like the line to be split up so it shows on the line underneath.
I would like one line to be:
Child
Age
Age
Weight
Height
and the next line to be:
Manufacturer, model, how is the child sitting in the seat, has the seat been in accident, and was it purchased used on the next line.
Also, is there a way to configure it so that the headlines are centered, and to change the font so that it matches the rest of the form?
The form is a mess right now as I am playing with different options
-
David JotForm Support ManagerReplied on October 30, 2017 at 6:19 PM
I have had some trouble managing to put the fields in two lines, would you consider having all fields displayed vertically? If you would, please inject the following code: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets
th {
display: none;
}
td{
display: block;
position: relative;
margin-left: 0px;
width: 400px;
}
td.col1:before {
content: "Child Name";
font-weight: bold;
margin-right: 300px;
}
td.col2:before {
content: "Age";
font-weight: bold;
margin-right: 300px;
}
td.col3:before {
content: "Age";
font-weight: bold;
margin-right: 300px;
}
td.col4:before {
content: "Height";
font-weight: bold;
margin-right: 300px;
}
td.col5:before {
content: "Weight";
font-weight: bold;
margin-right: 300px;
}
td.col6:before {
content: "Car Seat Manufacturer";
font-weight: bold;
margin-right: 200px;
}
td.col7:before {
content: "Car Seat Model";
font-weight: bold;
margin-right: 300px;
}
td.col8:before {
content: "How is the child sitting in the seat?";
font-weight: bold;
margin-right: 100px;
}
td.col9:before {
content: "Has this seat been in any sort of accident? Even Minor?";
font-weight: bold;
margin-right: 60px;
}
td.col10:before {
content: "Did your purchase this seat used?";
font-weight: bold;
}
td{
margin-top: 5px !important;
margin-bottom: 5px !important;
}
-
lindsayjayecoxReplied on October 30, 2017 at 6:43 PMI would, I just entered that in and it did not change anything.
Lindsay
lindsayjayephotography@gmail.com
248.798.2565
... -
Kevin Support Team LeadReplied on October 30, 2017 at 10:08 PM
I can see there are some errors in the code you have injected to your widget and it's not the same like my colleague's code.
Please remove all the current code of your widget and inject the code as provided by my colleague, this should be the result: https://form.jotform.com/73028767048968
Let us know how it goes.
-
lindsayjayecoxReplied on October 30, 2017 at 10:43 PMI would, but the way this looks is totally wrong :(
... -
lindsayjayecoxReplied on October 30, 2017 at 10:43 PMalright, there are 2 COnfigurable lists at the bottom of my page, I would
like CSS code for both if possible so that it is laid out neatly.
... -
Nik_CReplied on October 31, 2017 at 3:09 AM
Just to confirm, you want to have this Configurable list widget:
Showing the same like this:
Please confirm so we can work on it.
Thank you!
-
lindsayjayecoxReplied on October 31, 2017 at 11:43 AMyes, although I have deleted it. I don’t want to have to have you guys do it for me overtime I add something. So, on that note…..my form looks fantastic on the computer, but looks like this on mobile. Is there anything I can do to fix it?
Lindsay
lindsayjayephotography@gmail.com
248.798.2565
... -
Nik_CReplied on October 31, 2017 at 12:32 PM
On which phone are you checking your form?
I tested on iPhone and it was showing fine.
We'll wait for your response.
Thank you!
-
lindsayjayecoxReplied on October 31, 2017 at 1:43 PMIt is the iPhone 7 plus :) I would send a screen shot directly from my phone but its not loading!
Lindsay
lindsayjayephotography@gmail.com
248.798.2565
... -
lindsayjayecoxReplied on October 31, 2017 at 1:43 PM7plus
... -
Kevin Support Team LeadReplied on October 31, 2017 at 2:41 PM
I have been checking your form and the Configurable List is not there anymore: https://form.jotform.com/lindsayjayecox/car-seat-check-
Did you added the widget to another form?
Please post your screenshot following this guide: https://www.jotform.com/help/438-How-to-Post-Screenshots-to-Our-Support-Forum
Note that the forum does not accept attachments through email replies.
We will wait for your response.
-
lindsayjayecoxReplied on November 1, 2017 at 1:43 AMHello I am sorry I have been screwing around with this the entire day.
I finally got the configurable list to look great on the computer, however, it does not fit on the mobile screen appropriately. I don’t want people to have to scroll over to see the rest as I feel they won’t know to do that and will miss portions.
Here is the link
https://form.jotform.com/lindsayjayecox/car-seat-check-
Lindsay
lindsayjayephotography@gmail.com
248.798.2565
... -
Nik_CReplied on November 1, 2017 at 2:54 AM
I'll work on this and get back to you as soon as I finish.
Thank you for your patience.
-
Nik_CReplied on November 2, 2017 at 2:23 AM
Thank you for your patience.
Let's please try the below:
-Add the below code to your Custom CSS Field:
@media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){
iframe#customFieldFrame_533 {
position: relative;
width: 100%;
height: 0;
}
iframe#customFieldFrame_532{
position: relative;
width: 100%;
height: 0;
}
}
And add the below code to your first Configurable list:
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px){
td {
display: block !important;
}
th{display:none;}
td.col1:before {
content: "Child's Name";
}
td.col2:before {
content: "Child's Age";
}
td.col3:before {
content: "Child's weight";
}
td.col4:before {
content: "Child's Height";
}
}
And add the below code to your second Configurable list:
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px){
td {
display: block !important;
}
th{display:none;}
td.col1:before {
content: "Car Seat Manufacturer";
}
td.col2:before {
content: "Car Seat Model";
}
td.col3:before {
content: "Which child sits/will sit in this seat?";
}
td.col4:before {
content: "How does the child sit in this seat?";
}
td.col5:before {
content: "Vehicle this seat will be installed in";
}
td.col6:before {
content: "Vehicle Year";
}
td.col7:before {
content: "Seat ever been in a crash?";
}
td.col8:before {
content: "Seat purchased used?";
}
}
This is how it works:
Please try and let us know how it works.
Thank you!
-
lindsayjayecoxReplied on November 2, 2017 at 9:43 PMperfect!!!
than you so much!!!
If i add more to it, do i have to do more to the CSS??
Lindsay
lindsayjayephotography@gmail.com
248.798.2565
... -
David JotForm Support ManagerReplied on November 2, 2017 at 10:48 PM
Correct, if you add more field to the configurable list, it will be necessary to apply CSS code to those fields.
-
lindsayjayecoxReplied on November 3, 2017 at 10:43 AMThank you. Okay then, since you were so good at this. I added another widget under FINDINGS.
I need it to not only fit on the page, but also work on mobile devices.
Where it says DEPARTURE:static, i want that on its own line (to be used as a divider of some sort) and then everything else after that is following departure. Does that make sense?
Here is the website again:
https://www.jotform.com/lindsayjayecox/car-seat-check-
thank you!
Lindsay
lindsayjayephotography@gmail.com
248.798.2565
... -
lindsayjayecoxReplied on November 3, 2017 at 10:43 AMJust by playing around, I was able to get part of it correct on the mobile, until departure, and then it started putting the checkboxes in the wrong spots!
Lindsay
lindsayjayephotography@gmail.com
248.798.2565
... -
Kevin Support Team LeadReplied on November 3, 2017 at 11:08 AM
Please note that the code may change based on the number of columns your widget has, you will need to basically use the same code shared here and just change the positions of the columns based on how you want it to display.
Also, here is a guide with detailed explanation about how to style the widget with CSS codes: https://www.jotform.com/help/456-How-to-Style-Change-the-Layout-and-Customize-the-Configurable-List-Widget
I hope this helps.
-
lindsayjayecoxReplied on November 3, 2017 at 11:43 AMI did that but it didn’t totally work.
I also cannot get it to fit on the page on a regular web viewer
... -
lindsayjayecoxReplied on November 3, 2017 at 1:43 PMShould I send in another request or are you able to assist me with this?
Lindsay
lindsayjayephotography@gmail.com
248.798.2565
... -
Kevin Support Team LeadReplied on November 3, 2017 at 2:02 PM
I have been working on the CSS code to get your field displayed properly on desktop and mobile devices, please remove all the existing CSS code in your widget and inject this one instead:
@media screen and (min-device-width: 480px){
th {
display: none;
}
tr {
display: block;
}
td[class*="col"]:before {
font-weight: bold;
display: block;
}
/* Naming the fields*/
td.col1:before {
content:"Child Name";
}
td.col2:before {
content:"Vehicle";
}
td.col3:before {
content:"Seat Position in Car";
}
td.col4:before {
content:"CR Manufacturer";
}
td.col5:before {
content:"CR Model Name";
}
td.col6:before {
content:"CR type";
}
td.col7:before {
content:"CR Installed Using";
}
td.col8:before {
content:"History Known?";
}
td.col9:before {
content:"Ever in Crash?";
}
td.col10:before {
content:"Labels Missing?";
}
td.col11:before {
content:"Expired?";
}
td.col12:before {
content:"Recalled?";
}
td.col13:before {
content:"Correct Direction?";
}
td.col14:before {
content:"Harness Correct?";
}
td.col15:before {
content:"Recline Correct?";
}
td.col16:before {
content:"LA Correct?";
}
td.col17:before {
content:"Tether Correct?";
}
td.col18:before {
content:"Seatbelt Correct?";
}
td.col19:before {
content:"ON DEPARTURE";
}
td.col20:before {
content:"Seat Position in Car";
}
td.col22:before {
content:"New Seat Provided?";
}
td.col22:before {
content:"CR Manufacturer";
}
td.col23:before {
content:"CR Model Name";
}
td.col24:before {
content:"CR Installed Using";
}
td.col25:before {
content:"Child/CR Correct";
}
td.col26:before {
content:"CSS/Vehicle Compatibility";
}
td.col27:before {
content:"Educational Materials Given";
}
/* Positioning the fields in multiple columns*/
td.col14 {
display: block;
position: relative;
margin-left: 0px;
}
td.col15 {
display: block;
position: relative;
top: -86px !important;
margin-left: 105px;
}
td.col16 {
display: block;
position: relative;
top: -172px !important;
margin-left: 205px;
}
td.col17 {
display: block;
position: relative;
top: -258px !important;
margin-left: 278px;
}
td.col18 {
display: block;
position: relative;
top: -344px !important;
margin-left: 375px;
}
td.col19 {
position: relative;
display: block;
margin-top: -324px;
}
}
@media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){
/* Hide the original table headers, first row*/
#list > tbody > tr:nth-child(1) {
display: none !important;
}
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr {
border: 1px solid #ccc;
margin: 2px 2px;
}
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 40%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 35%;
padding-right: 10px;
white-space: nowrap;
}
/*
Re-label the columns here
*/
td.col1:before {
content:"Child Name";
}
td.col2:before {
content:"Vehicle";
}
td.col3:before {
content:"Seat Position in Car";
}
td.col4:before {
content:"CR Manufacturer";
}
td.col5:before {
content:"CR Model Name";
}
td.col6:before {
content:"CR type";
}
td.col7:before {
content:"CR Installed Using";
}
td.col8:before {
content:"History Known?";
}
td.col9:before {
content:"Ever in Crash?";
}
td.col10:before {
content:"Labels Missing?";
}
td.col11:before {
content:"Expired?";
}
td.col12:before {
content:"Recalled?";
}
td.col13:before {
content:"Correct Direction?";
}
td.col14:before {
content:"Harness Correct?";
}
td.col15:before {
content:"Recline Correct?";
}
td.col16:before {
content:"LA Correct?";
}
td.col17:before {
content:"Tether Correct?";
}
td.col18:before {
content:"Seatbelt Correct?";
}
td.col19:before {
content:"ON DEPARTURE";
font-weight: bold;
text-align: right;
}
td.col20:before {
content:"Seat Position in Car";
}
td.col22:before {
content:"New Seat Provided?";
}
td.col22:before {
content:"CR Manufacturer";
}
td.col23:before {
content:"CR Model Name";
}
td.col24:before {
content:"CR Installed Using";
}
td.col25:before {
content:"Child/CR Correct";
}
td.col26:before {
content:"CSS/Vehicle Compatibility";
}
td.col27:before {
content:"Educational Materials Given";
}
}
You can see the result on this form: https://form.jotform.com/73064754877974
Please note that it was a bit hard due to the lengh of your widget, for future widgets I would recommend you to split the widget in order to have a shorten version of it.
I hope this helps.
-
lindsayjayecoxReplied on November 3, 2017 at 2:43 PMWow! Thank you!!
just a few more things….…..the RECALL and CORRECT DIRECTION columns are not showing up, can I have those moved down to the HARNESS CORRECT line???
Lastly, I would like to add UPON ARRIVALS: static: as the first column (used as a divider as well, the same as ON DEPARTURE), would this totally screw up everything?
Also, one day they need to make this easier for us layman people :)
THANK YOU!!
Lindsay
lindsayjayephotography@gmail.com
248.798.2565
... -
lindsayjayecoxReplied on November 3, 2017 at 2:43 PMOh also, it looks like at the bottom where it says CSS/VEHICLE COMPATABILITY and EDUCATIONAL MATERIALS GIVEN, you are unable to click YES, because the last few letters of the line is overlapping? (on mobile)
Lindsay
lindsayjayephotography@gmail.com
248.798.2565
... -
David JotForm Support ManagerReplied on November 3, 2017 at 3:13 PM
My colleague Kevin is working on it, he will get back to you soon.
-
Kevin Support Team LeadReplied on November 3, 2017 at 4:05 PM
Lindsay,
Please go to the code in the widget and replace this part:
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 40%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 35%;
padding-right: 10px;
white-space: nowrap;
}
With this one:
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 40%;
padding-bottom: 10%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 35%;
padding-right: 10px;
white-space: normal;
}
The result can be seen here: https://form.jotform.com/73064754877974
I hope this helps.
-
lindsayjayecoxReplied on November 4, 2017 at 1:43 PMOh this is great! thank you!!!
Lindsay
lindsayjayephotography@gmail.com
248.798.2565
...
- Templates
- Integrations
- INTEGRATIONS
- See 100+ integrations
- FEATURED INTEGRATIONS
- PayPal
- Slack
- Google Sheets
- Mailchimp
- Zoom
- Dropbox
- Google Calendar
- Hubspot
- Salesforce
- See more Integrations
- Products
- PRODUCTS
- Form Builder
- Jotform Enterprise
- Jotform Apps
- Store Builder
- Jotform Tables
- Jotform Inbox
- Jotform Mobile App
- Jotform Approvals
- Report Builder
- Smart PDF Forms
- PDF Editor
- Jotform Sign
- Jotform for Salesforce Discover Now
- Support
