Product List: Move sublabel headers on top of the selection fields

Hi there, I am looking for CSS code to move the sublabel header on top of the selection fields on my product list. Could you please help provide the code?

Hi Arpi,

Thanks for reaching out to JotForm Support. As CSS codes often work on specific forms, can you confirm if you're working on this form? Also, did you mean to move the highlighted texts below on top of dropdowns?

Once we hear back from you, we'll be able to move forward with a solution.

Hi @sonnyfer,

Yes that is the sheet I'm working on; but that is not the field I wanted to move.

I was looking to move Quantity, Size, Color, Unit of Measure, Description on top of their related boxes.

Hi Arpi,

Thanks for getting back to us. Please inject the provided CSS code.

/*Display the input field under the label for Product List Quantity Selector and Product Option - 14500151*/

.form-sub-label-container {

    display: inline-grid !important;

}

/*Code ends here*/

Here's how to do it:

1. In Form Builder, on the right side of the screen, click on the Paint Roller icon.

2. On the right panel, go to Styles.

3. Scroll down to Inject Custom CSS.

4. Paste the provided CSS.

Result:

Give it a try and let us know how it goes.

That worked perfectly - thank you!

Hi Arpi,

Thank you for getting back to us. We're glad to have been of help. With that being said, we're marking this ticket as resolved. If you have any further questions or need assistance, please don't hesitate to reach out.