¿Cómo hacer que los campos ocupen el ancho de la lista configurable?

Hola. Me pueden ayudar con lo siguiente?Tengo el widget Lista configurable con 5 campos, pero se agrupan 4 campos en una línea y el 5to en una segunda línea.

¿Qué código CSS puedo usar para que cada campo ocupe el 100% del ancho de la hoja, de forma tal que cada campo quede en una línea?

Gracias de antemano.

Hi Laura,

Thanks for reaching out to Jotform Support. Our Spanish Support agents are busy helping other Jotform users right now, so I'll try to help you in English using Google Translate, but you can reply in whichever language you feel comfortable using. Or, if you'd rather have support in Spanish, let us know and we can have them do that. But, it might take a while until they're available again.

Now, coming back to your question, you can actually add a CSS code so each field will occupy the width of the form. Let me show you how:

1. Add this CSS code.

@media (min-width: 600px) {

#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;

}

}

2. In Form Builder, click the Widget Settings of the Configurable List.

3. Go to Custom CSS tab and paste the CSS code above.

4. Click Update Widget to apply the changes.

Here is the result:

That's it. You can now make the fields on your configurable list to be in different lines.

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

Thanks for your help. Great!