How to adjust the column widths in the Configurable List widget?

I need to adjust the size of the fields in a configurable list but I cannot seem to set up the CSS correctly. The code I have tried does not work. I have shared the CSS code I am using, which sets widths for different fields in the configurable list, but it still does not work as expected. I have expressed that I need additional help and want to talk to an agent. Finally, I requested to create a ticket for this issue.

Hi Roberto,

Thanks for reaching out to Jotform Support. We can adjust the width of the fields in your Configurable List widget using some CSS codes. Let me show you how to do that:

1. In Form Builder, click on your Configurable List widget and on its Wand icon.
2. Next, under the Custom CSS tab, paste the following codes below:

/* adjust CL fields width - 15122951*/

.configurable-list-field-row {

display: grid !important;

grid-template-columns: 50% 25% 25%; /* adjust width as needed */

}

.configurable-list-field-wrapper {

max-width: none !important;

}

/* Ends here */

Feel free to test this cloned demo form or clone it to your account to inspect it further. We also have a guide on How to Inject CSS Codes to Widgets that you can check out.

Give it a try and let us know if you need any help.

Thank you, Raymond. That is exactly what I was looking for.

One last question. Is there a way for the text associated with the first column (Menu Item in the example) to come out wrapped in case it was longer than the 50% space allocated to it.

Thank you!

Roberto

Hi Roberto,

I also cloned and tested your form, it's not possible to add wrapping if you are using a Text or Short Text element in the Configurable List widget. It's only possible when you used a Long Text field in the Configurable List widget. First, we need to remove the Short Text field and add the Long Text. Let me show you how:

1. In Form Builder, scroll down to the Configurable List widget and click on it.

2. Then, click on the Wand icon beside the widget to open the Widget Settings.

3. In the window that opens on the right side of the page, under the Field tabs, click on the Trash Can icon in the Menu Item field section.

4. Then, click on the Add Field button and in the menu that opens, click on Long Text and rename the field.

5. Now, click on the Six Dots icon beside the field and drag and drop it at the top.

Now, we also need to add a custom CSS code in the Configurable List widget.

1. First, copy this code below:

#listContainer .form-textarea {

    height: 41px;

}

2. While the Widget Settings window still open, click on the Custom CSS tab.

3. Then, scroll down and paste the code into the Inject CSS Code box.

4. Finally, click on the Update button at the bottom of the window.

That's it. Keep in mind that you need to do this to all your Configurable List widget. Check out my screencast below to see my results:

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

Thank you. I must be using some sort of old Configurable List widget. I don't have the FIELD tab in the settings.

See below.

Best,

Roberto

Hi Roberto,

I suggest using a Text Area field type instead of a Text field, as the Text Area is better suited for longer responses such as notes or comments. Let me show you how:

1. In Form Builder, scroll down to the Configurable List widget and click on it.
2. Then, click on the Wand icon to open the Widget Settings.
3. Now, in the window that opens on the right side of the page and in the Fields configuration section, change the text field type to textarea.
4. Finally, click on the Update button at the bottom of the page.

That's it. Keep in mind that you need to do this to all your Configurable List widget. Check out my screencast below to see my results:

We also have a guide on How to Set Up the Configurable List Widget and Supported Field Types and Syntax for the Configurable List Widget that you can check out.

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