Custom formatting of configurable listing

  • Profile Image
    guineapigme
    Asked 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

  • Profile Image
    Mike
    Answered 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
    Shadae
    Answered 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
    Shadae
    Answered 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
    guineapigme
    Answered 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
    Shadae
    Answered 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
    Shadae
    Answered 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
    guineapigme
    Answered 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
    EltonCris
    Answered 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!