-
blossomwithmaggieAsked on June 9, 2017 at 10:19 AM
In my form Bridal Hair and Makeup Survey, I have a configurable list that I would like to wrap so that it doesn't run off the page. Is that possible?
-
BJoannaReplied on June 9, 2017 at 12:28 PM
It is possible to split the fields into two rows, with custom CSS. If you are familiar with CSS you can do it yourself. Here are some threads, where you can see how this can be done:
https://www.jotform.com/answers/595103
https://www.jotform.com/answers/678723
We can also provide you the CSS code. Just tell us how would you like to split the fields. For example we can move all checkbox field to new row.
Let us know if you need further assistance.
-
blossomwithmaggieReplied on June 9, 2017 at 1:43 PMI'm not super familiar with css. Could you split it at the check boxes for me please? I really appreciate it!
Maggie Mae
Blossom Hair Design
52 Copper St
Eureka Springs, AR 72632
720.280.2865
www.blossomhairdesign.com
http://m.yelp.com/biz/blossom-hair-design-eureka-springs
... -
BJoannaReplied on June 9, 2017 at 2:38 PM
Will this work for you?
If so, add this CSS code to Custom CSS field of your Configurable list widget:
tr {
display: block;
}
th {
display: none;
}
td.col1:before {
content:"Name";
display: block;
}
td.col2:before {
content:"Role in Wedding";
display: block;
}
td.col3:before {
content:"Hair Length";
display: block;
}
td.col4:before {
content:"Hair Type";
display: block;
}
td.col5:before {
content:"Updo or 1/2 Updo";
display: block;
}
td.col6:before {
content:"Vintage Style";
display: block;
}
td.col7:before {
content:"Thermal Style (no pins)";
display: block;
}
td.col8:before {
content:"Blow Out (no pins)";
display: block;
}
td.col9:before {
content:"Makeup";
display: block;
}
td.col10:before {
content:"Lashes";
display: block;
}
td.col1, td.col2, td.col3, td.col4, td.col5, td.col6, td.col7, td.col8, td.col9, td.col10 {
display: inline-block;
float: left;
padding-bottom:10px;
padding-right:15px;
}
td.col6, td.col7, td.col8, td.col9, td.col10 {
display: inline-block;
float: left;
padding-right :15px!important;
}
Here is my demo form: https://form.jotformpro.com/71595545987981
Feel free to clone it.
Hope this will help. Let us know if you need further assistance.
-
blossomwithmaggieReplied on June 9, 2017 at 6:43 PMPerfect! Thank you!!!
Maggie Mae
Blossom Hair Design
52 Copper St
Eureka Springs, AR 72632
720.280.2865
www.blossomhairdesign.com
http://m.yelp.com/biz/blossom-hair-design-eureka-springs
... -
blossomwithmaggieReplied on June 12, 2017 at 11:43 AMThank you for your help. I inserted the coding you gave me below. I'd like it to split the two lines with the drop downs on line one and the check boxes on line two. Can you help me with that modification? This is what mine looks like after the code you gave me.
Maggie Mae
Blossom Hair Design
52 Copper St
Eureka Springs, AR 72632
720.280.2865
www.blossomhairdesign.com
http://m.yelp.com/biz/blossom-hair-design-eureka-springs
... -
BJoannaReplied on June 12, 2017 at 12:53 PM
I have inspected your form and configurable list on your form, looks exactly the same as configurable list on my form and on a screenshot I provided.
Your screenshot is not shown here on forum. Please note that images that are attached inside of email will not be shown here on forum. You will have to open this thread and upload your screenshot.
-
blossomwithmaggieReplied on June 12, 2017 at 1:43 PMHmm, when I published and looked at it it didn't appear that way. Ok, thank you. I'll look at it again.
Maggie Mae
Blossom Hair Design
52 Copper St
Eureka Springs, AR 72632
720.280.2865
www.blossomhairdesign.com
http://m.yelp.com/biz/blossom-hair-design-eureka-springs
... -
BJoannaReplied on June 12, 2017 at 2:15 PM
Please check it again and let us know if there is an issue on your form.
Please note that your form is responsive and if the width of the form is changed, for example form is viewed on mobile device, fields inside of configurable list will adjust and some of them will be moved to new row, so that all can be shown on the form.