Product List: How to display sub-products without selecting an item?

Is there a way to display all of the Sub Products when the form is initially displayed. Currently, what happens is that the Sub Products are collapsed (invisible) until the Product is selected. And then the error message is displayed.

Which is really quite a bad user experience. (& then as you depict - a Quantity is selected and the Error goes away)

If the Sub Products were able to be displayed when the form was initially displayed, the user could select Quantity and avoid the Error or

Hi kcat15,

Currently, Jotform does not support displaying all sub-products expanded by default when the form initially loads. Sub-products remain collapsed and only become visible once the main product is selected.

As a workaround, you can inject custom CSS code into your form to display the sub-products without selecting any items in the Product List. Let me show you how:

1. First, copy this code:

/* display sub-product - 22785471 */

.form-line[data-payment="true"] .sub_product .form-product-child-table {

 display: block !important;

}

/* code ends here */

2. Now, in the Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Next, under the Styles tab, scroll down and paste the CSS Code into the Inject Custom CSS section.

This should save the changes automatically. Check out the screencast below for the results:

You can also check out this guide on How to Inject Custom CSS Codes for more information.

As for your other suggestion, I've moved that to a new thread. You can check that out here.

Give it a try and let us know if you have any other questions.

The CSS code works fine for displaying the sub-products .

Thank you John & Mary for your help!

Dave