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 make a Configurable List widget display in more than one row?

    Asked by kidsalliance on February 12, 2016 at 03:42 PM

    I set up a configuration widget, but all the columns do not fit.  It is running off the page and I can't find seem to change the font size on the columns either.

  • Profile Image

    Answered by Boris on February 13, 2016 at 05:23 AM

    We can force Configurable List to display a line in two rows with a bit of custom CSS, though as it is a table element it requires custom coding for each column of the table.

    I have checked your last edited form, and here is the custom CSS code for your exact configuration of the Configurable List widget that makes it display in multiple rows:

    .checkbox, .radio {
    margin: 3px 0;
    min-width: 70px;

    .col1 [type="text"] { width: 100px; }
    th { display: none; }
    td.col1, td.col2, td.col3, td.col4, td.col5, td.col6, td.col7 {
    float: left;
    padding: 20px 5px 1px 1px;
    width: 30%;

    td.col1:before { content: "Name: "; }
    td.col2:before { content: "Ethnicity: "; }
    td.col3:before { content: "Gender: "; }
    td.col4:before { content: "Date of Birth: "; }
    td.col5:before { content: "Age: "; }
    td.col6:before { content: "Disabled: "; }
    td.col7:before { content: "Status: "; }
    td.col7 { width: 60%; }

    You can add the above CSS code to your Configurable List widget by clicking on its wand-shaped icon, switching to Custom CSS tab, and pasting the code there. Please take a look at the following image for visual guidance:

    Here is a cloned version of your form with the change applied, so that you can see it in action:


    The Configurable List has been moved to top of the form, for easier access to it. I have also noticed you had a line in your General configuration which shouldn't really be there "table {border-spacing: 5px !important;}". Please also try removing that line from under the General tab of your widget:

    Let us know how it goes, or if you need further assistance, and we will be happy to help.