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

    Custom formatting of configurable listing

    Asked by guineapigme on February 02, 2015 at 01:44 PM

     

    For my configurable list, I have a drop down selection, a text box and then I would like 3 more text boxes underneath this each on different lines to suit the needs of my user.

     

    How can I input a or format so that my 3 extra "Dance Description" text boxes end up on different lines (also indented under the first text box would be ideal). 

     

    Thank you!

     

     

    http://submit.jotform.us/form.php?formID=43637462243152&sid=298711308081211547&mode=edit

    configurable listing
  • Profile Image
    JotForm Support

    Answered by Mike on February 02, 2015 at 03:43 PM

    Unfortunately, the Configurable List widget does not support such structure at the moment.

    Item #1
    - Field 1, Field 2,
    ------------ Field 3,
    ------------ Field 4,
    ------------ Field 5.
    --------------------------------------------------
    Item #2
    - Field 1, Field 2,
    ------------ Field 3,
    ------------ Field 4,
    ------------ Field 5.
    --------------------------------------------------
    Item #3
    - Field 1, Field 2,
    ------------ Field 3,
    ------------ Field 4,
    ------------ Field 5.
    --------------------------------------------------

    You can place the fields on the same line only. I have sent a ticket to our Next Level Support, so they will consider adding such functionality to the widget. However, we can not promise anything.

    We will let you know if we have any updates on this.

  • Profile Image

    Answered by Shadae on February 02, 2015 at 03:55 PM

    Hi guineapigme,

    To add to my colleagues response, you can use CSS code to have your configurable list widget placed into two rows.

    You can view a clone version of your form with the changes made here: http://www.jotform.com/form/50326151593956? 

    Please inform us if this is a suitable alternative.

    Thank you.

  • Profile Image

    Answered by Shadae on February 02, 2015 at 04:24 PM

    Hi guineapigme,

    I did a bit more tweaking and was able to get the form laid out as described. Please view sample form here: http://www.jotform.com/form/50326529102951? 

    Please add the following code in the Custom CSS field within your widget.

    #list > tbody > tr:first-child {

    display: none;

    }

    td.col1:before {

    content: "Type";

    display: block;

    }

    td.col2:before {

    content: "Medley Description";

    display: block;

    }

    td.col3:before {

    content: "Dance 1";

    }

    td.col4:before {

    content: "Dance 2";

    display: block;

    }

    td.col5:before {

    content: "Dance 3";

    display: block;

    }

    td.col4 {

    float: left;

    left: -125px;

    position: relative;

    top: 32px;

    padding-top : 6px;

    }

    td.col5 {

        float: left;

        left: -125px;

        position: relative;

        top: 32px;

    padding-top : 3px;

    }

    tr {

         height: 130px;

    }

    Please note that I also changed the width for the second column from 500px to 400px.

  • Profile Image

    Answered by guineapigme on February 02, 2015 at 07:04 PM

    Hi there,

     

    Thanks for looking into this.   It is almost what I need.  I need the Dance Description fields to be starting on the next line underneath the Medley Description line as they need to a long field as well.   

    Would this be possible?  It is so close to what my director needs.  

     

    Thanks for giving this some thought.

     

    Deborah

  • Profile Image

    Answered by Shadae on February 02, 2015 at 08:12 PM

    Hi Deborah,

    I was able to make the changes, you can view it on the sample form: http://www.jotform.com/form/50326529102951? 

    You can clone the sample form, or you can make the edits to your form. 

    Please replace the previous code provided with the following code:

    .col3 [type="text"] {

     width: 500px;

    }

    .col4 [type="text"] {

     width: 500px;

    }

    .col5 [type="text"] {

     width: 500px;

    }

    #list > tbody > tr:first-child {

    display: none;

    }

    td.col1:before {

    content: "Type";

    display: block;

    }

    td.col2:before {

    content: "Medley Description";

    display: block;

    }

    td.col3:before {

    content: "Dance 1";

    }

    td.col4:before {

    content: "Dance 2";

    display: block;

    }

    td.col5:before {

    content: "Dance 3";

    display: block;

    }

    td.col3 {

    float: left;

    left: -525px;

    position: relative;

    top: 32px;

    padding-top : 6px;

    }

    td.col4 {

    float: left;

    left: -525px;

    position: relative;

    top: 32px;

    padding-top : 6px;

    }

    td.col5 {

        float: left;

        left: -525px;

        position: relative;

        top: 32px;

    padding-top : 3px;

    padding-bottom : 50px

    }

    tr {

         height: 130px;

    I have also changed back the second column back to 500px. 

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

  • Profile Image

    Answered by Shadae on February 02, 2015 at 08:14 PM

    Please use this code instead to get the correct alignment:

    .col3 [type="text"] {

     width: 500px;

    }

    .col4 [type="text"] {

     width: 500px;

    }

    .col5 [type="text"] {

     width: 500px;

    }

    #list > tbody > tr:first-child {

    display: none;

    }

    td.col1:before {

    content: "Type";

    display: block;

    }

    td.col2:before {

    content: "Medley Description";

    display: block;

    }

    td.col3:before {

    content: "Dance 1";

    }

    td.col4:before {

    content: "Dance 2";

    display: block;

    }

    td.col5:before {

    content: "Dance 3";

    display: block;

    }

    td.col3 {

    float: left;

    left: -505px;

    position: relative;

    top: 32px;

    padding-top : 6px;

    }

    td.col4 {

    float: left;

    left: -505px;

    position: relative;

    top: 32px;

    padding-top : 6px;

    }

    td.col5 {

        float: left;

        left: -505px;

        position: relative;

        top: 32px;

    padding-top : 3px;

    padding-bottom : 50px

    }

    tr {

         height: 130px;

  • Profile Image

    Answered by guineapigme on February 02, 2015 at 08:25 PM

    Thank you, that looks pretty good!   What parameter do I use to adjust the indentation if I would like the Dance 1,2,3, indented a few spaces to provide visual clarity?

     

    Also, I seem to not be able to see the configurable list function of delete anymore.  Before, I think you had to press the + button at the bottom and you could get the option to delete an entry.

     

    Did this disappear, or is it specific to something else.

     

    Thanks very much,

     

    Deborah

     

  • Profile Image
    JotForm Support

    Answered by EltonCris on February 03, 2015 at 01:18 AM

    Hi Deborah,

    With just a few modification from my colleague's CSS, you can get it indented. You can append the following CSS codes.

    td.col3, td.col4, td.col5{

    left: -493px !important;

    }

    .col3 [type="text"],

    .col4 [type="text"],

    .col5 [type="text"]{

    width: 487px !important;

    }

    It should look like the following. If this isn't what you mean, let us know and we'd be happy to help.

    With regards to the x button, add this CSS codes to display the "x" button on the 3rd column.

    .buttonsColumn {

    float: left;

    position: relative;

    left: -505px;

    top: -73px;

    }

     

    Result:

    Hope this helps. Thanks!