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

    Configurable List: How can I display the widget in multiple lines?

    Asked by tshanks on June 21, 2017 at 02:50 PM
    Page URL:
    https://form.jotform.us/71656347742160

  • Profile Image
    JotForm Support

    Answered by Kevin_G on June 21, 2017 at 03:52 PM

    Please, allow me some time to work on the needed CSS code to split the widget, I will get back to you as soon as possible. 

  • Profile Image
    JotForm Support

    Answered by Kevin_G on June 21, 2017 at 04:43 PM

    You will need to add some CSS code to the widget in order to display it in multiple lines, there is some part of the code that is static, it is the same for all the widgets and you could use the same code for all the Configurable List widgets. 

    th {

        display: none;

    }

    tr {

        display: block;

    }

    The next code will change based on the number of columns you have in your widget, if you notice the code it has each column number, it uses the column class to set the headers:

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

        font-weight: bold;

        display: block;

    }

    You will also need to set the column titles again, you will use the same class as above to set the title for each column, do note that it goes on the same order so for the first column you will use the class "col1" for the second one "col2" and so on, example: 

    td.col1:before {

        content:"Semester";

    }

    Just replace the value in "content" with the title your column should have. 

    Now, to handle the columns you will use the following code: 

    td.col5 {

        display: block;

        position: relative;

        top: 3px !important;

        margin-left: 0px;

    }

    The used class contains the column number so you could replace it with the column you want to affect with the code, you could also change the "top" and "margin-left" values. 

    Once you have finished with your code it needs to be injected to the widget, once you select the widget in the form builder you should click on the wizard icon, paste the code under the Custom CSS tab: 

    I can see on your form that it has still the default fields, you could configure the widget with the fields you want it to have and try customizing it with the CSS code, you may also let us know if you need help while doing it and we will be glad to assist you. 

    Here is a guide that will help you setting up the widget: How-to-Set-Up-the-Configurable-List-Widget

    Hope this helps.