-
encoreluxcoachesAsked on October 8, 2015 at 11:23 AM
http://www.jotform.com/answers/595103-Configurable-List-CSS-codes-to-fit-fields-into-2-rows
I found the forum above which is similar to what I need to do to fit my configurable list in a mobile view. The only issue is I need the full date instead of just the month and year. I have been playing around with it for a while but couldn't figure it out.
I really like the way the results are submitted now in one row however the input fields need to be responsive for a mobile device.
Here is my form: http://form.jotform.us/form/52796185596171
- Matt
-
encoreluxcoachesReplied on October 8, 2015 at 12:02 PM
I found this css that was able to fit the fields across the scree.
@media only screen and (max-device-width:50em){
table#list {width: 100% !important;}
textbox, textarea, select{width:100% !important;}
input[type=text] {width: 100% !important;}
th {font-size: 10px !important;font-weight: normal !important;}
}
Is there a way make the fields vertical?
-
Mike_G JotForm SupportReplied on October 8, 2015 at 4:12 PM
I have checked your form using an android phone and the Configurable List widget on your website looks like this:
I have cloned your form and added this CSS codes to the Custom CSS tab of the Configurable List widget in your form:
.dateContainer{
display: inline !important;
}
#list tr:nth-child(1){
display: none !important;
}
#list{
width: 350px !important;
}
th.col1,th.col2, th.col3, th.col4, th.col5,th.col6, th.col7{
display: block !important;
}
td.col1,td.col2, td.col3, td.col4,td.col5, td.col6,td.col7{
display: block !important;
padding-bottom: 8px !important;
}
td.col1:before{
content: "State Name: " !important;
font-weight: bold !important;
color: #55555A !important;
}
td.col2:before{
content: "Date: " !important;
font-weight: bold !important;
color: #55555A !important;
}
td.col3:before{
content: "Route NOS: " !important;
font-weight: bold !important;
color: #55555A !important;
}
td.col4:before{
content: "ODO Reading: " !important;
font-weight: bold !important;
color: #55555A !important;
}
td.col5:before{
content: "Fuel: " !important;
font-weight: bold !important;
color: #55555A !important;
}
td.col6:before{
content: "Fuel 2: " !important;
font-weight: bold !important;
color: #55555A !important;
}
td.col7:before{
content: "Notes: " !important;
font-weight: bold !important;
color: #55555A !important;
}
td.col1{
border-top: 2px solid #55555A !important;
border-top-left-radius: 5px !important;
border-top-right-radius: 5px !important;
}
td.col1,td.col2, td.col3, td.col4,td.col5, td.col6,td.col7{
border-right: 2px solid #55555A !important;
border-left: 2px solid #55555A !important;
}
td.col7{
border-bottom: 2px solid #55555A !important;
border-bottom-left-radius: 5px !important;
border-bottom-right-radius: 5px !important;
}
.add{
margin-top: 8px !important;
}
I have viewed the it from an android phone again, and here's what it looks like on my end:
Adding another record results to this:
You can view the clone form by clicking this link: https://form.jotform.com/52805221673957
Please feel free to clone it.
Also, here's a sample email notification after making a test submission with two records entered on the widget.
I hope this helps. Let us know if you need any further assistance. Thank you.