What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How to position configurable list in two lines?

    Asked by JustEatIT on July 12, 2017 at 06: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?

    Thanks

    Filippo

    Page URL:
    https://form.jotformeu.com/63404459260353

    Screenshot
  • Profile Image
    JotForm Support

    Answered by Nik_C 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!

  • Profile Image
    JotForm Support

    Answered by Nik_C on July 14, 2017 at 03: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!

     

  • Profile Image

    Answered by JustEatIT on July 19, 2017 at 05: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 Thanks

    Filippo

     

  • Profile Image
    JotForm Support

    Answered by Charlie on July 19, 2017 at 06: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. 

  • Profile Image

    Answered by JustEatIT on July 19, 2017 at 06:47 AM

    Hi guys!
    now it's working perfectly. 

     

    really thanks!
    Fil