How to position configurable list in two lines?

  • Profile Image
    JustEatIT
    Asked 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

  • Profile Image
    Nik_C
    Answered 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
    Nik_C
    Answered 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
    JustEatIT
    Answered 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
    Charlie
    Answered 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
    JustEatIT
    Answered on July 19, 2017 at 06:47 AM

    Hi guys!
    now it's working perfectly. 

     

    really thanks!
    Fil