Come posso ridurre la larghezza del campo Codice Postale tramite CSS?

Salve, volevo modificare la larghezza del campo ZIP code/ Codice postale all'interno del modulo INDIRIZZO.

Ho seguito la vostra guida al seguente link: https://www.jotform.com/answers/5049563-how-to-change-the-width-of-the-zip-field-in-the-address-element-using-css

Ma non ho possibilità di salvare la modifica (tasto save assente) e di conseguenza non capisco se sto sbagliando qualcosa.

Grazie

Buonasera Gabriele,

Grazie per aver contattato il supporto tecnico di Jotform. Mi dispiace sapere che sta avendo problemi a modificare la larghezza del campo "Codice Postale" tramite CSS. Mi piacerebbe informarla che i nostri sviluppatori hanno rimosso il tasto Salva. Adesso una volta inserito un codice CSS, questo viene salvato automaticamente.

Ho controllato il suo modulo con ID 241274611073348 e ho notato che ha inserito un codice CSS con un ID campo sbagliato. Prima di fornirle il codice corretto, le spiego come può controllare l'ID campo nel suo modulo:

1. Nel Costruttore di Moduli, fare clic sull'elemento Indirizzo.
2. Successivamente fare clic sull'icona a forma di ingranaggio che appare sulla destra del campo.
3. Successivamente nel pannello che appare sul lato destro dello schermo, fare clic Avanzate.
4. Scorrere verso il basso ed fare clic sulla zona Dettagli del Campo.
5. Infine sotto ID Campo, può vedere l'ID del campo Postcode.

Ecco adesso che sa qual è il ID corretto del suo campo "Codice Postale" può procedere a correggere il codice inserito. Ecco come fare:

1. Nel Costruttore di Moduli, fate clic sul pulsante Designer Moduli, in alto a destra dello schermo.
2. Quindi, fare clic sulla scheda Stili.
3. Scorrere fino a Inserisci CSS Personalizzato, rimuovere il codice CSS aggiunto precedentemente e poi aggiungere quello fornito qui sotto:

/* Reduce width of the Codice Postale field - 14627273 */

#input_5_postal {

  width: auto !important;

  min-width: 313px !important;

}

/* Code Ends Here*/

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.

Grazie mille Vincenzo,

il problema era esattamente l'ID del campo.

Come hai potuto vedere sto cercando di ridurre la dimensione dei campi CAP e Provincia, in modo da posizionarli entrambi sulla stessa riga. Nello specifico voglio che il campo CAP abbia le dimensioni per contenere 5 cifre e il campo Provincia 2 cifre. Il problema ora è che anche se seleziono un valore di width inferiore a 200px il campo non si riduce.

Cosa sto sbagliando?

Grazie

Buongiorno Gabriele,

Grazie per averci contattati nuovamente e per le informazioni aggiuntive. Ridurre la larghezza dei campi "Provincia" e "Codice Postale", e poi allinearli è possible farlo utilizzando un altro codice CSS. Le spiego come fare:

1. Nel Costruttore di Moduli, fate clic sul pulsante Designer Moduli, in alto a destra dello schermo.
2. Quindi, fare clic sulla scheda Stili.
3. Scorrere fino a Inserisci CSS Personalizzato, rimuovere il codice CSS aggiunto precedentemente e poi incollare quello qui sotto:

/* Code to adjust the Provincia and Codice Postale Width - 14627273 */

#input_5_city {

    width: auto;

    min-width: 445px !important;

    margin: 0px 5px 0px 0px;

}

.form-address-line-wrapper.jsTest-address-line-wrapperField:nth-child(3) {

  display: inline-flex !important;

  width: 182px;

}

.form-address-line-wrapper.jsTest-address-line-wrapperField:nth-child(4) {

  display: inline !important;

  width: 90px;

  margin-left: 350px;

}

.form-address-table {

  display: -ms-flexbox;

  display: flex;

  width: 100%; */

  -ms-flex-wrap: wrap;

 flex-wrap: wrap;

}

/* 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.

Tutto perfetto, grazie mille per la chiarezza e la celerità!

Buonasera,

purtroppo mi sono accorto che su mobile alcuni campi risultano oltre i bordi.

Nello specifico il campo "Città" e il "CAPTCHA" finale, mentre nella versione Desktop non c'è alcun problema.

Come posso risolvere? Grazie

Buonasera Gabriele,

Grazie per averci contattato nuovamente. Per applicare queste modifiche anche ai dispositivi mobili dovrà, modificare il codice CSS. Le mostro come fare:

1. Nel Costruttore di Moduli, fate clic sul pulsante Designer Moduli, in alto a destra dello schermo.
2. Quindi, fare clic sulla scheda Stili.
3. Scorrere fino a Inserisci CSS Personalizzato, rimuovere il codice CSS aggiunto precedentemente e poi incollare quello qui sotto:

/* Code to adjust the Provincia and Codice Postale Width on Desktop -14627273*/

@media only screen and (min-width: 500px){

#input_5_city {

    width: auto;

    min-width: 445px !important;

        margin: 0px 5px 0px 0px;

}

.form-address-line-wrapper.jsTest-address-line-wrapperField:nth-child(3) {

  display: inline-flex !important;

  width: 182px;

}

.form-address-line-wrapper.jsTest-address-line-wrapperField:nth-child(4) {

  display: inline !important;

  width: 90px;

  margin-left: 350px;

}

.form-address-table {

  display: -ms-flexbox;

  display: flex;

  width: 100%; */

  -ms-flex-wrap: wrap;

 flex-wrap: wrap;

}

}

/* Code For Desktop Ends Here*/



/* Code to adjust the Provincia and Codice Postale Width on Mobile - 14627273 */

@media only screen and (max-width: 480px){

#input_5_city {

    width: auto;

    min-width: 200px !important;

        margin: 0px 5px 0px 0px;

}

.form-address-line-wrapper.jsTest-address-line-wrapperField:nth-child(3) {

  display: inline-flex !important;

  width: 182px;

}

.form-address-line-wrapper.jsTest-address-line-wrapperField:nth-child(4) {

  display: inline !important;

  width: 90px;

  margin-left: 280px;

}

.form-address-table {

  display: -ms-flexbox;

  display: flex;

  width: 100%; */

  -ms-flex-wrap: wrap;

 flex-wrap: wrap;

}

.form-address-line.form-address-zip-line.jsTest-address-lineField {

    margin-top: -91px;

}

}

/* Code for Mobile Ends Here*/

Nel Costruttore di Moduli potrebbe sembrare che il codice non abbia modificato i campi, però le modifiche sono visibili nella versione live del modulo.

Risultati su Desktop:

Risultati su Mobile:

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

Buongiorno,

la modifica purtroppo è parziale.

Innanzitutto non appena si inserisce il codice appare questa sovrapposizione.

Per quanto riguarda il codice, i campi indirizzo in modalità mobile orizzontale restano sfasati, mentre il campo captcha in modalità mobile verticale supera il bordo destro.

Infine nella modalità mobile verticale vorrei sistemare la spaziatura tra il blocco indirizzi e quelli successivi, poichè è molto più ampia.

Grazie

Hi gabrielesilvestri97,

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, coming back to your question, I cloned your form and used the CSS code shared by my colleague, then tested it on a mobile device as well to see if I could replicate the issue, but everything was working properly. Check out the screencasts below to see my results:

View in Form Builder:

Vertical view using an iPhone:

Horizontal view using an iPhone:

I've gone ahead and cleared your form caches as an additional aid. Can you try it again and see how it goes? If you run into the same issue again, let us know, and we'll do some more testing to see what's going on. 

Once we hear back from you, we'll be able to move forward with a solution.

Ciao Lara,

il codice non sembra essere lo stesso perchè in precedenza avevamo modificato le dimensioni di alcuni campi indirizzo.

al momento il codice completo è il seguente:

/* Code to adjust the Provincia and Codice Postale Width - 14627273 */

#input_5_city {

  width: auto;

  min-width: 445px !important;

  margin: 0px 5px 0px 0px;

}

.form-address-line-wrapper.jsTest-address-line-wrapperField:nth-child(3) {

 display: inline-flex !important;

 width: 182px;

}

.form-address-line-wrapper.jsTest-address-line-wrapperField:nth-child(4) {

 display: inline !important;

 width: 90px;

 margin-left: 350px;

}

.form-address-table {

 display: -ms-flexbox;

 display: flex;

 width: 100%; */

 -ms-flex-wrap: wrap;

 flex-wrap: wrap;

}

/* Code Ends Here*/

/* Code to adjust the Provincia and Codice Postale Width on Mobile - 14627273 */

@media only screen and (max-width: 480px){

#input_5_city {

  width: auto;

  min-width: 200px !important;

    margin: 0px 5px 0px 0px;

}

.form-address-line-wrapper.jsTest-address-line-wrapperField:nth-child(3) {

 display: inline-flex !important;

 width: 182px;

}

.form-address-line-wrapper.jsTest-address-line-wrapperField:nth-child(4) {

 display: inline !important;

 width: 90px;

 margin-left: 280px;

}

.form-address-table {

 display: -ms-flexbox;

 display: flex;

 width: 100%; */

 -ms-flex-wrap: wrap;

 flex-wrap: wrap;

}

.form-address-line.form-address-zip-line.jsTest-address-lineField {

  margin-top: -91px;

}

}

/* Code for Mobile Ends Here*/

Come puoi vedere il campo "città" "provincia" e "codice postale" hanno una dimensione personalizzata e sono sulla stessa riga.

Hi gabrielesilvestri97,

Thanks for getting back to us. I tested the form using the same CSS code you've shared. I was still not able to replicate the issue.

/* Code to adjust the Provincia and Codice Postale Width - 14627273 */

#input_5_city {

 width: auto;

 min-width: 445px !important;

 margin: 0px 5px 0px 0px;

}

.form-address-line-wrapper.jsTest-address-line-wrapperField:nth-child(3) {

 display: inline-flex !important;

 width: 182px;

}

.form-address-line-wrapper.jsTest-address-line-wrapperField:nth-child(4) {

 display: inline !important;

 width: 90px;

 margin-left: 350px;

}

.form-address-table {

 display: -ms-flexbox;

 display: flex;

 width: 100%; */

 -ms-flex-wrap: wrap;

 flex-wrap: wrap;

}

/* Code Ends Here*/

/* Code to adjust the Provincia and Codice Postale Width on Mobile - 14627273 */



@media only screen and (max-width: 480px){

#input_5_city {

 width: auto;

min-width: 200px !important;

 margin: 0px 5px 0px 0px;

}

.form-address-line-wrapper.jsTest-address-line-wrapperField:nth-child(3) {

 display: inline-flex !important;

 width: 182px;

}

.form-address-line-wrapper.jsTest-address-line-wrapperField:nth-child(4) {

 display: inline !important;

 width: 90px;

 margin-left: 280px;

}

.form-address-table {

 display: -ms-flexbox;

 display: flex;

 width: 100%; */

 -ms-flex-wrap: wrap;

 flex-wrap: wrap;

}

.form-address-line.form-address-zip-line.jsTest-address-lineField {

 margin-top: -91px;

}

}

/* Code for Mobile Ends Here*/

Check out the screencasts below to see my results:

View in Form Builder:

Vertical view using an iPhone:

Horizontal view using an iPhone:

I suggest clearing your browser's cache and cookies as well before accessing your form again. If you're still experiencing the same issue after that, we'll do a more in-depth investigation and work on finding a solution. You can also check out my cloned form here.

Once we hear back from you, we'll be able to move forward with a solution.

Purtroppo il problema si ripresenta su qualsiasi Pc e Browser, come puoi verificare dagli screen:

https://eu.jotform.com/build/241283476417359#preview

Buonasera Gabriele,

Grazie per averci contattato nuovamente e per gli screenshot. Ho testato il modulo di prova della collega e anche il suo modulo su Desktop e Smartphone e ho potuto notare che il codice CSS utilizzato funziona correttamente. Dia un'occhiata agli screenshot sottostanti:

Desktop:

Smartphone in verticale:

Smartphone in orizzontale:

Smartphone Captcha:

Le chiedo gentilmente di controllare la versione live del suo modulo direttamente su dei dispositivi e non tramite l'anteprima che potrebbe del modulo che potrebbe non riconoscere alcuni codici CSS.

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

Ok grazie mille, evidentemente era un problema relativo solo dell'anteprima sulla vostra piattaforma.