Adding labels to infinite list widget

  • supplyshield
    Asked on October 18, 2016 at 4:13 PM

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

  • John_Benson
    Replied on October 18, 2016 at 6:11 PM

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

    Adding labels to infinite list widget Image 1 Screenshot 30

    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.

    Adding labels to infinite list widget Image 2 Screenshot 41

    Hope that helps.

  • supplyshield
    Replied on October 18, 2016 at 8: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? 

  • Chriistian Jotform Support
    Replied 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.

    Adding labels to infinite list widget Image 1 Screenshot 40

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

    Adding labels to infinite list widget Image 2 Screenshot 51

    Here's how it should look after:

    Adding labels to infinite list widget Image 3 Screenshot 62

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

  • supplyshield
    Replied on October 19, 2016 at 11:37 AM

    That works, thank you!

  • supplyshield
    Replied on October 19, 2016 at 11:41 AM
  • supplyshield
    Replied 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

     

    Adding labels to infinite list widget Image 1 Screenshot 20

  • John_Benson
    Replied on October 19, 2016 at 4: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:

    Adding labels to infinite list widget Image 1 Screenshot 20

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

  • supplyshield
    Replied on October 19, 2016 at 5:12 PM

    That looks to be the trick - thank you! 

  • Kiran Support Team Lead
    Replied on November 1, 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:

    Adding labels to infinite list widget Image 1 Screenshot 20

    Hope this information helps! 

  • supplyshield
    Replied on November 1, 2016 at 12:21 PM

    Thank you!