Adding labels to infinite list widget

  • Profile Image
    supplyshield
    Asked on October 18, 2016 at 04:13 PM
  • Profile Image
    John_Benson
    Answered 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
    supplyshield
    Answered 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
    Chriistian
    Answered 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
    supplyshield
    Answered on October 19, 2016 at 11:37 AM

    That works, thank you!

  • Profile Image
    supplyshield
    Answered on October 19, 2016 at 11:41 AM
  • Profile Image
    supplyshield
    Answered 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
    John_Benson
    Answered 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
    supplyshield
    Answered on October 19, 2016 at 05:12 PM

    That looks to be the trick - thank you! 

  • Profile Image
    Kiran
    Answered 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
    supplyshield
    Answered on November 01, 2016 at 12:21 PM

    Thank you!