Adding labels to infinite list widget

What is JotForm?

JotForm is a freeonline form builder which helps you create online forms without writing a single line of code.

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.

Why do you not want to answer this thread?(Your answer will be sent to Jeanette and Aytekin)

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

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.

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: