How to update the width of the Configurable List widget fields.

Come posso modificare la larghezza di ciascun campo, disposti su di una singola riga, dei campi che compongono il widget "Elenco Configurabile"?

Hi Mirko,

Thanks for reaching out to Jotform Support. Unfortunately, our Italian Support agents are busy helping other Jotform users at the moment. 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 Italian, let us know, but you have to wait until they're available again.

Now, regarding your concern, I can see from your form that you have multiple Configurable List widget. I have created a CSS code that will work for all of them, but you will have to paste the CSS code for each Configurable List widget. Here is the custom CSS code for the Configurable List widget.

/*Remove min width for all fields - 9465421*/

.configurable-list-field-wrapper {

min-width: 0px;

}

/*Adjust width of 1st field - 9465421*/

.configurable-list-field-row > div:nth-child(1) {

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

}

/*Adjust width of 2nd field - 9465421*/

.configurable-list-field-row > div:nth-child(2) {

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

}

/*Adjust width of 3rd field - 9465421*/

.configurable-list-field-row > div:nth-child(3) {

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

}

Here's how to do it:

• In Form Builder, click on the Configurable List widget to select.
• On the right side of the Configurable List widget, click on the Wand icon.
• Go to Custom CSS and paste the provided CSS code.
• Click on Update Widget.

You can adjust the percentage value to your preference. Please make sure that the total value of the percentage value does not exceed 100% as shown in the screenshot for the CSS code width adjustment to work properly.

If you plan to add more fields to your Configurable List widget, you can copy and paste the CSS code for the 1st, 2nd or 3rd field and update the number of nth-child and do not forget to update the percentage value so that its total for all fields is 100% as shown in the screenshot.

Result:

Let us know if there’s anything else we can help you with.

Uau!

Grazie tanto!

Magnifico!

Scusa ancora Christopher,

invece per predisporre:

• Sulla prima riga il campo "Descrizione attività" al 100% della larghezza;
• Sulla seconda riga i campi "Ulteriore suddivisione utenti" con una larhezza del 20%; il campo "Spazio/Ambiente da predisporre" larghezza al 40% e il campo "Strumenti/materiali da reperire" al 40%;
• Sulla terza riga il campo "Note" con una larghezza al 100%

Mi puoi aiutare con il codice CSS?

Grazie

Hi Mario,

Thanks for reaching out to us for help. You can use the following CSS code to arrange the fields according to your desired width.

.configurable-list-field-wrapper {

min-width: 0px;

}

.configurable-list-field-row > div:nth-child(1) {

  width: 450px !important;

}

.configurable-list-field-row > div:nth-child(2) {

  width: 100px !important;

}

.configurable-list-field-row > div:nth-child(3) {

 width: 250px !important;

}

.configurable-list-field-row > div:nth-child(4) {

 width: 250px !important;

}

Let me show you how to inject CSS codes to widgets:

• Click on the Wand Icon next to the Configurable List Widget to open the Widget Settings menu.
• Go the Custom CSS tab, and paste the above code into the blank area.
• Click on Update Widget, and that'll be it.

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