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

    Adding labels to infinite list widget

    Asked by supplyshield on October 18, 2016 at 04:13 PM

    Can labels be added to the fields within an infinite list widget? 

    Page URL:
    http://supplyshield.com/request-a-quote-2/

    infinite list list widget infinite list widget adding label labels
  • Profile Image
    JotForm Support

    Answered by John_Benson on October 18, 2016 at 06:11 PM

    Yes, you can add labels to the Infinite List widget. Please check my screen animation:

    However, if you are referring to a sub-label for each fields, it is not possible. You can only edit the placeholder or the hint text of each field.

    Hope that helps.

  • Profile Image

    Answered by supplyshield on October 18, 2016 at 08:08 PM

    Thank you for the reply - however this puts the name within the text box and not as a separate label above/next to the field - is that possible? 

  • Profile Image
    JotForm Support

    Answered by Chriistian on October 18, 2016 at 10:41 PM

    That can be achieved by adding the custom CSS code below into the Infinite List widget. You can change the yellow highlighted text to change the text on the label.

    td:before{

        display: block;

        padding-bottom: 5px;

        font-weight: bold;

    }

    .col1:before {

        content: 'Mfr. Part No.';

    }

    .col2:before {

        content: 'Mfr Name';

    }

    .col3:before {

        content: 'Customer Part No';

        width: 120px;

    }

    .col4:before {

        content: 'Quantity';

    }

    .col5:before {

        content: 'Target Date';

    }

    .col6:before {

        content: 'Target Price';

    }

    .col7:before {

        content: 'Additional Info';

    }

    To add the css, select the widget and click on the wand icon on the top right of the widget.

    Then select Custom CSS tab and paste the css on the css area.

    Here's how it should look after:

    If you need further assistance, please let us know.
    Regards.

  • Profile Image

    Answered by supplyshield on October 19, 2016 at 11:37 AM

    That works, thank you!

  • Profile Image

    Answered by supplyshield on October 19, 2016 at 11:41 AM
  • Profile Image

    Answered by supplyshield on October 19, 2016 at 11:57 AM

    Ok  - this solution has generated another issue - Now as each list item is added, it displays the column titles above each row listing

    You can see it if you scroll down and add items on "Product Order" section

    http://supplyshield.com/request-a-quote-2/

    Here is a screenshot of what happens with this solution once rows are added

     

  • Profile Image
    JotForm Support

    Answered by John_Benson on October 19, 2016 at 04:19 PM

    If I understand you correctly, you would only like to show the label of each column at the top. Initially, when you open the form, the Infinite List widget will hide the label through CSS. Once you entered a data in the fields and add an item, the labels will appear at the top.

    Please try this solution:

    1. Please remove the CSS provided by my colleague Christian inside the widget.

    2. Please insert this custom CSS instead:

    #list {

    display: block !important;

    #list .col1  { 

    width: 142px !important;

    #list .col1  { 

    width: 140px !important;

    #list .col2  { 

    width: 140px !important;

    #list .col3  { 

    width: 140px !important;

    #list .col4  { 

    width: 140px !important;

    #list .col5  { 

    width: 140px !important;

    #list .col6  { 

    width: 140px !important;

    #list .col7  { 

    width: 140px !important;

    #list .col8  { 

    width: 140px !important;

    Here's the result:

    If this is not what you need, please let us know. Thank you.

  • Profile Image

    Answered by supplyshield on October 19, 2016 at 05:12 PM

    That looks to be the trick - thank you! 

  • Profile Image
    JotForm Support

    Answered by Kiran on November 01, 2016 at 11:53 AM

    With reference to the other thread https://www.jotform.com/answers/973696/, here is the custom CSS code to be injected to the widget. Please replace the existing code with the following code in the custom CSS section of the widget.

    table#form td {

      display:table-cell;

      float: left;

    }

    input {

      width: 100% !important;

    }

    table#list tr {

        display: table-row;

        max-width: 50px !important;

        font-size: 12px;

    }

    table#list td, th {

        display: inline-block;

    }

    table#list th {

        display: none;

    }

    @media screen 

      and (min-device-width: 1200px) 

      and (max-device-width: 1600px) 

      and (-webkit-min-device-pixel-ratio: 1) { 

        table#form {

        width: 33%;

    }

    }

    #list td:before{

        display: block;

        padding-bottom: 5px;

        font-weight: bold;

    }

    #list .col1:before {

        content: 'Mfr. Part No.';

    }

    #list .col2:before {

        content: 'Mfr Name';

    }

    #list .col3:before {

        content: 'Customer Part No';

    }

    #list .col4:before {

        content: 'Quantity';

    }

    #list .col5:before {

        content: 'Target Date';

    }

    #list .col6:before {

        content: 'Target Price';

    }

    #list .col7:before {

        content: 'Additional Info';

    }

    The widget should be displaying as shown below after injecting this code:

    Hope this information helps! 

  • Profile Image

    Answered by supplyshield on November 01, 2016 at 12:21 PM

    Thank you!