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 display the Configurable List Widget in two different rows using custom CSS code

    Asked by meryl.bergraaf on January 13, 2016 at 02:24 PM Page URL:
    https://form.jotform.co/51344522348856

    rows configurable list list widget configurable
  • Profile Image
    JotForm Support

    Answered by Kevin_G on January 13, 2016 at 05:31 PM

    Hi,

    Thank you for contacting us.

    Please, allow me some time, I will work in a workaround to display the widgets as you need.

    Thanks.

  • Profile Image
    JotForm Support

    Answered by Kevin_G on January 13, 2016 at 06:26 PM

    Hi,

    I just found a workaround to achieve what you want, I cloned your form and I was able to display the widget in two different columns.

    Open the wizard for the first widget and paste this CSS code in the CSS tab : 

    td.col3 {

        display: block;

        position: relative;

        top: 20px !important;

    }

    td.col4 {

        display: block;

        position: relative;

        top: -20px !important;

        margin-left:180px;

    }

    td.col5 {

        display: block;

        position: relative;

        top: -45px !important;

        margin-left: 323px;

    }

    th {

        display: none;

    }

    .col1:before, .col2:before, .col3:before, .col4:before {

        font-weight: bold;

        display: block;

    }

    td.col1:before {

        content:"Bestuurs Functie";

    }

    td.col2:before {

        content:"Datum aanvang";

    }

    td.col3:before {

        content:"Datum beëindiging";

    }

    td.col4:before {

        content:"Opmerking";

    }

    .d {

    display:none;

    }

    th {

        display: none;

    }

    tr {

    display: block;

    }

    Then do the same with the second configurable list, open the wizard and then go to the CSS tab and paste this Code : 

    td.col4 {

        display: block;

        position: relative;

        top: 20px !important;

        margin-left: -1px;

    }

    td.col5 {

        display: block;

        position: relative;

        top: -20px !important;

        margin-left: 162px;

    }

    td.col6 {

        display: block;

        position: relative;

        top: -60px !important;

        margin-left: 324px;

    }

    th {

        display: none;

    }

    .col1:before, .col2:before, .col3:before, .col4:before,.col5:before,.col6:before {

        font-weight: bold;

        display: block;

    }

    td.col1:before {

        content:"Commissie niveau";

    }

    td.col2:before {

        content:"Commissie Functie";

    }

    td.col3:before {

        content:"Commissie naam";

    }

    td.col4:before {

        content:"Datum aanvang";

    }

    td.col5:before {

        content:"Datum beëindiging";

    }

    td.col6:before {

        content:"Opmerking";

    }

    .d {

    display:none;

    }

    th {

        display: none;

    }

    tr {

    display: block;

    }

     

    I will explain you how it works, basically you can copy this code and will work with all the Configurable List Widgets, the only thing you have to change would be this code  : 

    .col1:before, .col2:before, .col3:before, .col4:before,.col5:before,.col6:before {

        font-weight: bold;

        display: block;

    }

    If you have more than 6 or less than 6, you would have to add the .col class, for example, if we would have one more column , we would use .col7:before in order to set the font to the title, then with this code you set the title :

    td.col6:before {

        content:"Opmerking";

    }

    So, for example, if you would have, as the example above, one more column you would need to add this :

    td.col7:before {

        content:"Title";

    } 

    Now, with this code you configure how the element will be displayed in the form, for example with this code : 

    td.col6 {

        display: block;

        position: relative;

        top: -60px !important;

        margin-left: 324px;

    }

    If you would like to set the last field for example the column 7, you would have to add this code :

    td.col7 {

        display: block;

        position: relative;

        top: -60px !important;

        margin-left: 324px;

    }

    And you only would have to change the top and margin-left properties.

    If your widget only has for example 5 fields and you would like to display them in two different rows, the only thing you would have to do , is follow the steps as explained above, but removing the CSS code.

    Also, take a look to my cloned form, there you will see the change, you can also clone it : https://form.jotform.com/60126354150949 

    Hope this is what you are looking for.

    Do let us know if you have any question, we will be glad to assist you.

    Regards

  • Profile Image

    Answered by meryl.bergraaf on January 13, 2016 at 06:46 PM
    Ok thank you very much
    I have literally been fighting 2 days with this.
    I figured out the dates without the day.
    But i cannot grasp the formula for the second row.
    Sent from my iPhone
    ...
  • Profile Image
    JotForm Support

    Answered by Kevin_G on January 13, 2016 at 07:53 PM

    Hi,

    You're welcome.

    With the code provided you can change all the Configurable Widgets in your form.

    Feel free to contact us anytime if you need more help.

    Regards.