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 - all on one line problem

    Asked by Skydivenow on October 13, 2014 at 09:50 AM

    Hi.

    I have a configurable list which is all on one line.

     

    **Moved it to the last entry on the first page for ease of access**

     

    Could someone point me in the right direction to inject the custom CSS code to split the lines apart.

    http://form.jotformeu.com/form/42853429440355

    I can't seem to figure out how to put the entries after DOB on a new line.

    Also, if someone can tell me why the text ones are different sizes and how to correct, that would be great too!


    Thanks guys :)

     

     

     

    Page URL:
    http://form.jotformeu.com/form/42853429440355

    problem all configurable list css code different thanks jotformeu
  • Profile Image

    Answered by Shadae on October 13, 2014 at 11:55 AM

    Hi Skydivenow,

    To confirm you would like to have your configurable list to be split into two rows so that it will not be as long on the form?

    The widget is designed with the intention to have multiple information entered in one row. As such the option to have that done would not be available within the widget.

    I will work on this for you and get back to you. Thank you!

  • Profile Image

    Answered by Shadae on October 13, 2014 at 11:56 AM

    Hi again,

    I have also moved your question regarding the different text sizes to a new link: http://www.jotform.com/answers/442301 

    That question will be answered there.

  • Profile Image

    Answered by Shadae on October 13, 2014 at 01:39 PM

    Hi Skydivenow,

    With the assistance of my college. We were able to configure your list to be in two rows as requested.

    Please inject the following CSS into the the Configurable List Widget:

    #list > tbody > tr:first-child {

        display: none;

    }

    td.col1:before {

         content: "First Name:*";

         display: block;

    }

    td.col2:before {

         content: "Surname:*";

         display: block;

    }

    td.col3:before {

         content: "Gender";

    }

     

    td.col4:before {

         content: "D.O.B";

         display: block;

    }

    td.col5:before {

         content: "Height(cm)";

         display: block;

    }

    td.col6:before {

         content: "Weight(kgs)";

         display: block;

    }

    td.col7:before {

         content: "email";

         display: block;

    }

    td.col5 {

         float: left;

         left: -595px;

         position: relative;

         top: 70px;

    }

    td.col6 {

         float: left;

         left: -500px;

         position: relative;

        top: 32px;

    }

    td.col7 {

        float: left;

        left: -400px;

        position: relative;

        top: -8px;

    }

    tr {

         height: 110px;

    }

    I hope that this helps you with your desired result! Please inform us if you need further assistance.