How to change configurable list widget layout

Please, I´m using a Configurable List Widget.

But it is too long, not looking good.

I saw that you can change how the list looks by adding your custom CSS codes.

But I don´t know how to do it by my self.

Could somebody help me with this, please?

This is my form (the problem is on number 12): https://form.jotform.com/220403419840650

Hello Ana,

Thank you for contacting Jotform Support. You can replace your current custom CSS to this to set your configurable list to vertical layout.

#listContainer .configurable-list-field-label {

   min-width: calc(150px - 8px);

}

.configurable-list-field-row {

   -webkit-flex-direction: column;

   -ms-flex-direction: column;

   flex-direction: column;

   align-items: flex-start !important;

}

.configurable-list-field-wrapper {

   flex-direction: row !important;

}

#listContainer 

div.configurable-list-field-row-wrapper:not(:first-child) 

span.configurable-list-field-label {

   display: unset !important;

}

.form-dropdown{

   height: 22px;

}

.stepper-btn-wrap{

   visibility: hidden;

}

Let me show you how to add CSS into the widget:

• In the Form Builder, select your configurable list, and click the wand icon.

1. In the Widget Settings, click Custom CSS.
2. Then add the CSS code.
3. Click Update Widget button.

Checkout the screenshot below to seem my result:

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