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

    Asked by melanie.seehafer on February 03, 2015 at 10:26 AM

    Is there a way to make your configurable list on more than one line. Right now it goes off the page and cuts off when in the live view.  I am trying to make it more user friendly looking.  See my attached photo

    Screenshot
    configurable list configurable attached and cuts off
  • Profile Image

    Answered by Shadae on February 03, 2015 at 01:33 PM

    Hi melanie.seehafer,

    To confirm, you would like to know if it is possible to split the configurable list widget into two rows.

    Unfortunately that is not currently a feature of the widget. It is however possible to do this using custom css codes that would be injected within the widget itself.

    I will work on the CSS code needed for this field and get back to you.

  • Profile Image

    Answered by melanie.seehafer on February 03, 2015 at 01:43 PM

    Yes you are correct I want this split into two rows.  

     

    Thank you looking forward to the custom css codes.

     

     

  • Profile Image

    Answered by Shadae on February 03, 2015 at 04:32 PM

    Hi melanie.seehafer,

    Please inject this custom CSS code into your widget:

    #list > tbody > tr:first-child {

    display: none;

    }

    td.col1:before {

    content: "Location Description 1";

    display: block;

    }

    td.col2:before {

    content: "Location Description 2";

    display: block;

    }

    td.col3:before {

    content: "Location Description 3";

    }

    td.col4:before {

    content: "Item Quantity";

    display: block;

    }

    td.col5:before {

    content: "Item Size";

    display: block;

    }

    td.col6:before {

    content: "Element Size";

    display: block;

    }

    td.col7:before {

    content: "Single or Double Faced";

    display: block;

    }

    td.col8:before {

    content: "Fully lit, Fully Decorated";

    display: block;

    }

    td.col9:before {

    content: "Custom or Classic";

    display: block;

    }

    td.col5 {

    float: left;

    left: -710px;

    position: relative;

    top: 160px;

    }

    td.col6 {

    float: left;

    left: -550px;

    position: relative;

    top: 100px;

    }

    td.col7 {

        float: left;

        left: -400px;

        position: relative;

        top: -10px;

    }

    td.col8 {

    float: left;

    left: -200px;

    position: relative;

    top: -90px;

    }

    td.col9 {

    float: left;

    left: -40px;

    position: relative;

    top: -170px;

    }

    tr {

         height: 110px;

    }

    I hope this helps, please inform us if you need further assistance.

    Thank you.

  • Profile Image

    Answered by melanie.seehafer on February 04, 2015 at 08:39 AM

    Thank you this helps alot! 

  • Profile Image

    Answered by Carina on February 04, 2015 at 10:47 AM

    On behalf of my colleague you are most welcome.

    Feel free to contact us if further support is needed.