How to make a Configurable List widget display in more than one row?

  • Profile Image
    kidsalliance
    Asked 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
    Boris
    Answered 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 {
    display:inline-block;
    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:

    https://form.jotformpro.com/form/60431802297958

    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.