Configurable List: Increase the width of the fields

Deseo ampliar los campos así como lo dibujo en el imagen:

Actualmente tengo este código en el CSS:

@media (min-width: 600px) {

#listContainer .configurable-list-field-label { min-width: calc(250px - 80px);

}

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

}

Pero no me funciona.

Gracias por su ayuda

Hi tamoro82,

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, I understand the issue, but I’ll need a bit of time to work out a solution. I’ll get back to you shortly.

Thanks for your patience, we appreciate it.

Hi tamoro82,

Thanks for waiting. You can change the size of the text fields Configurable List widget by injecting the CSS code in your widget below:

/* change the font size of the input field */

textarea, select, input {

    width: 400px;

}



.configurable-list-field-wrapper{

    max-width: calc(100% - 8px) !important;

}



/* Ends here */ 

To inject the CSS Code in your widget, check out the steps and screencast below:

1. Open your form in Form Builder, click the wand icon of your Configurable List widget to open the Widget Settings panel.
2. Go to the Custom CSS tab.
3. Paste the CSS Code into the textarea.
4. Click the Update Widget button to save the changes.

Give it a try and let us know how it goes

Hello,

I can't see a preview:

Hi tamoro82, 

Thanks for getting back to us. I've checked your forms and why you can't check the preview or the live version because they are disabled. You can easily enable a form through the Form Builder. Let me show you how:

1. In Form Builder, click on Settings.
2. In Form Status, click on the dropdown and change its status to Enabled.

Once done, you'll be able to check the preview and the live version.

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

It's works perfect!!!!!

Thank you so much!!!