How to remove the border in a Configurable list widget?

Is there a way to remove the divider and padding that appears between entries in the Configurable List widget?

Hi Kendra, 

Thanks for reaching out to Jotform Support. 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 krcornelis, 

You can easily remove the border line above the rows of the Configurable list widget by Injecting CSS Codes into your form widget's Custom CSS section. Let me walk you through it:

1. First, copy this code:

.configurable-list-field-row-wrapper{

border: none !important;

}

2. In Form Builder, click on the Configurable List widget, and then click on the wand icon.

3. Now, under the Custom CSS tab, paste the code.

4. Finally, update the widget.

Result:

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

Hi Bilal!

This worked great, thank you so much. I now would like to reduce the amount of padding between entries (to about half of what it is now), but when I adjust the padding in CSS it doesn't change. What can I do?

Hi Kendra, 

You can just add another property of padding and add the !important attribute to the value to overlap the default changes. Here's the modified code:

.configurable-list-field-row-wrapper{

border: none !important;

padding-top: 0 !important;

}

Result:

Reach out again if there’s anything else we can do for you.