Gift Registry: CSS to add new line in the item label.

I am desperately trying to create a sign up form and I'd like to use jotform widgets. The current widgets do not provide enough information in each card so I tried to use the CSS. However, it's not updating. Any assistance would be greatly appreciated

Thanks!

Hi Kemi, 

Thanks for reaching out to Jotform Support. I checked your form and found that there were no CSS code injected on your form. Can you specify what kind of customization you need on your Gift Registry Widget? If you can also take a screenshot of what’s happening, that will help us to better understand what’s going on. We have a guide about how to do that here.

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

Hi Mikhael,

thanks for your response! I didn't save it because it did not change anything. I'm trying to make each item in the widget multi-line. i.e., Item 1 --> Item 1 <br> Item 1 Price <br> Item 1 Category

Hi kemiakenzua, 

Thanks for reaching out to us for help. You can try our Product list field which already has a similar interface that you described above. Here's how you can add and configure this field to have categories as well as quantities and prices:

• In Form Builder, on the left side of the page, click on the Add Form Elements menu.
• Hover your mouse over the Product List, and drag and drop it onto your form.

• Next to the Product List, click on the List icon, and in the menu on the right side of the page, click on Settings.
• Scroll down a bit, and then toggle Enable Categories to the On position.
• Enter your category name, and click on Add.
• Repeat the process to add more new categories.

• Now in the Product List, click on the Edit icon, and enter your product details.
• In the same menu, under Select a Category, choose your category, and then click on Save. And that’s it. You’re done.

You can also check out How to Add Product Categories to Payment Fields here.

Let us know if there’s anything else we can help you with.

I need to simple add a line break within each widget label, where I currently have <br>. How do I do this?

Hi kemiakenzua,

Thanks for your feedback. I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

Thanks for your patience and understanding. We appreciate it.

Hi kemiakenzua, 

Thanks for your patience, we appreciate it. I understand that you want to add a line break within each label. Unfortunately, the HTML tag is not supported in the Gift Registry widget to add a new line. As a workaround for that, you can add only the first line in the widget and then add the second line via the CSS code. Let me show you how:

1. In Form Builder, click on the Add Form Element menu on the left side of the page.
2. Click on the Widgets tab.
3. Search and add the Gift Registry widget, and click on the Wand icon.
4. In the General Tab, add the following options under the Items to show only the first line.

6:30am pick up at XX{10}

6:30am pick up at XX{11}

6:30am pick up at XX{12}

6:30am pick up at XX{unlimited}

6:30am pick up at XX{unlimited}

5. In the Custom CSS tab, paste the CSS code given below to add the second line for each item:

li.list-item {

  height: 65px;

}

#checklist > li:nth-child(1) > label:after {

  content: '\a 7:30pm drop off at xx';

 white-space: pre;

}

#checklist > li:nth-child(2) > label:after {

  content: '\a 7:30pm drop off at xx';

 white-space: pre;

}

#checklist > li:nth-child(3) > label:after {

  content: '\a 7:30pm drop off at xx';

 white-space: pre;

}



#checklist > li:nth-child(4) > label:after {

  content: '\a 7:30pm drop off at xx';

 white-space: pre;

}

#checklist > li:nth-child(5) > label:after {

  content: '\a 7:30pm drop off at xx';

 white-space: pre;

}

.checklist label {

     padding-top: 0.25em !important;

}

6. Finally, click on the Update Widget button.

That's it. Check out the screenshot below to see the result:

Here's a demo form that you can test and clone.

Give it a try, and let me know if there's anything else I can help you with.