-
JustEatITAsked on July 12, 2017 at 6:52 AM
Hi guys,
on this form I have a view problem: 2 question are too large and I have some trouble when I m filling up the form and the PDF that the form create cut the last part of the answer.
How I can put the second part of the question in a new row to solve the 2 problems?
ThanksFilippo
-
Nik_CReplied on July 12, 2017 at 11:31 AM
This is doable with CSS, but please allow me some time to make a CSS that will work in your form.
I will get back to you once I have a working CSS.
Thank you!
-
Nik_CReplied on July 14, 2017 at 3:21 PM
Thank you very much for your patience.
For the first configurable list from your image, please copy the below CSS code into Custom CSS code of the widget:
th {
display: none;
}
.col1:before, .col2:before, .col3:before .col4:before, .col5:before, .col6:before {
font-weight: bold;
display: block;
}
td.col1:before {
content:"Categoria";
display: block;
}
td.col2:before {
display: block;
content:"Nome Prodotto";
}
td.col3:before {
display: block;
content:"Disponibilità";
}
td.col4:before {
display: block;
content:"Misure";
}
td.col5:before {
display: block;
content:"Prezzi";
}
td.col6:before {
display: block;
content:"Descrizione";
}
td.col5, td.col6 {
display: block;
position: relative;
}
td.col5 {
top: 40px;
left: -377px;
}
td.col6 {
top:2px;
left: -505px;
}
And it will look like this:
For the second one please paste this CSS, also in its Custom CSS field:
th {
display: none;
}
.col1:before, .col2:before, .col3:before .col4:before, .col5:before, .col6:before,.col7:before,.col8:before,.col9:before {
font-weight: bold!important;
display: block;
}
td.col1:before {
content:"Nome del menù";
display: block;
}
td.col2:before {
display: block;
content:"Prezzo";
}
td.col3:before {
display: block;
content:"Disponibilità";
}
td.col4:before {
display: block;
content:"Descrizione";
}
td.col5:before {
display: block;
content:"Prima Scelta";
}
td.col6:before {
display: block;
content:"Seconda Scelta";
}
td.col7:before {
display: block;
content:"Terza Scelta";
}
td.col8:before {
display: block;
content:"Quarta Scelta";
}
td.col9:before {
display: block;
content:"Quinta Scelta";
}
td.col5, td.col6, td.col7, td.col8, td.col9 {
display: block;
position: relative;
}
td.col6 {
top:0px;
left: -495px;
}
td.col7{
top:-65px;
left:-340px
}
td.col8{
top:-130px;
left:-185px
}
td.col9{
top:-195px;
left:-30px
}
And it will look like this:
You can check my clone before you do any changes so you can see how it looks: https://form.jotformpro.com/71924973959981
Please let us know how it worked for you.
Thank you!
-
JustEatITReplied on July 19, 2017 at 5:05 AM
Hi mate!
thank you very much, your solution is working fine, I've only one little things to setup. In the second question, the "+" button is 4 - 5 cm below the answer. Can you help me to put the "+" button near the answer like the previous answer?
Really ThanksFilippo
-
CharlieReplied on July 19, 2017 at 6:44 AM
Hi,
I made changes on the 2nd Configurable list widget field ("Nuovi prodotti con menu a tendina") on my end. Here's the version of my custom CSS code:
.checkbox, .radio {
margin: 3px 0;
min-width: 70px;
}
tr {
display: block;
max-height: 300px !important;
}
td.col6 {
display: inline-block;
position: relative;
top: 10px !important;
}
td.col7 {
display: inline-block;
position: relative;
top: 10px !important;
}
td.col8 {
display: inline-block;
position: relative;
top: 10px !important;
}
td.col9 {
display: inline-block;
position: relative;
top: 10px !important;
}
th {
display: none;
}
.col1:before, .col2:before, .col3:before, .col4:before, .col5:before, .col5:before, .col6:before, .col7:before, .col8:before, .col9:before {
font-weight: bold;
display: block;
}
td.col1:before {
content:"Nome del menù";
}
td.col2:before {
content:"Prezzo";
}
td.col3:before {
content:"Disponibilità";
}
td.col4:before {
content:"Descrizione";
}
td.col5:before {
content:"Prima Scelta";
}
td.col6:before {
content: "Seconda Scelta";
display: block;
}
td.col7:before {
content:"Terza Scelta";
display: block;
}
td.col8:before {
content:"Quarta Scelta";
display: block;
}
td.col9:before {
content: "Quinta Scelta";
display: block;
}
Replace your current one with the above one. Here's my cloned form on how it looks: https://form.jotformpro.com/71992397694982.
Here's an example of it:
Let us know if that works.
-
JustEatITReplied on July 19, 2017 at 6:47 AM
Hi guys!
now it's working perfectly.really thanks!
Fil