Configurable List: How to remove the horizontal bar?

Buongiorno,

quando selezione "+CORSO" da questo form https://eu.jotform.com/build/220182497830356 , dopo aver inserito un nuovo elemento nella lista, appare la barra di scorrimento orizzontale.

vorrei che questo blocco si comportasse come quello immediatamente superiore per il quale, aggiungendo n righe, non abbare alcuna barra orizzontale.

come modificare il CSS per ottenere questo risultato ?

grazie.

approfitto anche per chiedere come fare in modo che la colonna "codice corso" sia più stretta (ad esempio 30% della larghezza. Grazie.

Hi CENTROCFA,

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 and we can have them do that. But, keep in mind that you'd have to wait until they're available again.

Now, let me help you with your question. When I cloned and tested your form, the same thing happened to me. After investigating it a bit, I found a solution. It's really easy to fix. Let me show you how to remove the horizontal bar:

1. Select the Configurable List widget and click the Wand icon to open the Widget Settings.
2. In the General tab, toggle the Single Line to ON.
3. Click the Update Widget button to save.

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

perfetto. approfitto anche per chiedere come fare in modo che la colonna "codice corso" sia più stretta (ad esempio 30% della larghezza. Grazie.

Hi CENTROCFA,

I understand you are looking to set the field "codice corso" to 30%. We will also need to adjust the second field to cover full width. This can be done using custom CSS code, check out the steps and screenshot below to see how to add the custom CSS to your widget:

• Click on the Wand icon to open Widget Settings.
• Open the Custom CSS tab and add the below code.

/*To change the field size - 15756263*/

.configurable-list-field-wrapper.col1.text-field-selector {

    max-width: 30% !important;

}



.configurable-list-field-wrapper.col2.dropdown-field-selector {

    max-width: fit-content !important;

}

• Click on the Update button to save the changes.

Here's what the result will look like:

Here's the cloned version of the form that you can test.

Please give it a try and let us know how it goes. 

esatto, 30% per il campo "codice corso".

inserito il CSS indicato nel https://eu.jotform.com/build/220182497830356

Non funziona.

Hi CENTROCFA,

Can you try replacing the entire widget's custom CSS code with this one?

@import url('https://fonts.googleapis.com/css2?family=Titillium+Web');



* {

  font-family : 'Titillium Web', sans-serif;

  font-size : 20px !important;

}

[data-widget-name="Configurable List"] > iframe {

  width: 100% !important;

}

  #list tbody:first-child > tr:first-child {

    display: none;

  }

  #list {

    width: 100%;

    border-collapse: collapse;

  }

  #list tbody:first-child > tr > td{

    display:block;

    padding: 2px 0;

  }

  #list tbody:first-child > tr + tr + tr {

    border-top: 3px solid #ccc;

  }

  #list > tbody:first-child tr td.col1 {

    padding-top: 20px;

  }

  .mobileColumnName {

    display: inline-block;

    padding-bottom: 4px;

    width: 20%;

    box-sizing: border-box;

  }

  .mobileColumnName + input,

  .mobileColumnName + textarea,

  .mobileColumnName + select,

  .mobileColumnName + .radio-container,

  .mobileColumnName + .checkbox-container,

  .mobileColumnName + .dateContainer {

    width: 80%;

    display: inline-block;

    box-sizing: border-box;

    vertical-align:top;

    box-shadow:none;

  }

  .buttonsColumn {

    text-align: right;

  }



/*To change the field size - 15756263*/



.configurable-list-field-wrapper.col1.text-field-selector {

  max-width: 20% !important;

}



.configurable-list-field-wrapper.col2.dropdown-field-selector {

  max-width: fit-content !important;

}

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 text area.
4. Click the Update Widget button to save the changes.

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

Buonasera CENTROCFA,

Ho testato il suo modulo e ho potuto verificare anche io che il codice non funziona, per risolvere questo problema può utilizzare un codice CSS diverso. Le mostro come fare:

1. Nel Costruttore di Moduli, fare clic sull'elemento Lista Configurabile.
2. Successivamente, fare clic sull'icona a forma di Bacchetta Magica che apparirà sulla destra.
3. Nel pannello Impostazioni Widget, sulla destra dello schermo, fare clic sull scheda CSS Personalizzato.
4. Infine, rimuovere il codice CSS aggiunto precedentemente e inserire quello mostrato qui sotto:

/* Code to reduce Codice Corso column width to 30% - 15756263 */

.configurable-list-field-wrapper.col1.text-field-selector {

    max-width: 30%!important;

}

.configurable-list-field-wrapper.col2.dropdown-field-selector {

    max-width: 100%;

}

/* Code Ends Here */

Risultato:

Qui può testare questo modulo di prova o clonarlo per capire meglio come è stato configurato.

Provi e ci faccia sapere se ha bisogno di ulteriori chiarimenti.

Salve, confermo: funziona perfettamente.

molte grazie.