Come posizionare le select di [comune] in orizzontale (dalla versione 1.2.2)

Un modo semplice per posizionare in orizzontale le select di [comune] è quello di sfruttare il modulo CSS flexbox.
Le select di [comune] vengono racchiuse in un tag <span> che può fungere da contenitore; su questo tag è impostata la classe gcmi-wrap, mentre su ogni select sono comunque impostate le classi:
wpcf7-select (in modo da visualizzare le select in maniera uniforme alle altre select generate da Contact Form 7;
wpcf7-comune.

è quindi possibile impostare in un foglio di stile CSS gli opportuni attributi di queste classi per ottenere una visualizzazione orizzontale, in base a quanto previsto dal modulo CSS flexbox. Tuttavia, utilizzando queste classi, tutte i tag [comune] dei moduli assumeranno lo stesso aspetto.

Per questo motivo nel tag [comune] (dalla versione 1.2.2) è possibile impostare due parametri: “wrapper_class” e “class” che creeranno delle classi specifiche per il tag <span> usato come wrapper e per le <select> generate da [comune].
Sarà quindi possibile utilizzare queste classi per impostare la visualizzazione degli elementi prodotti dal tag [comune].

Di seguito, un breve esempio.
Supponiamo che in un modulo CF7 si utilizzino due tag [comune] (uno, ad esempio, per il comune di nascita, e uno per il comune di residenza).
I nomi di questi tag, nell’esempio saranno “comune-nas” e “comune-res”. Si intende visualizzare le select di “comune-nas” in orizzontale, mentre quelle di “comune-res” in verticale.
Utilizzeremo quattro nomi classi: esterno-oriz e interno-oriz, rispettivamente per il wrapper e le select del tag visualizzato in orizzontale (comune-nas), ed esterno-vert e interno-vert rispettivamente per il wrapper e le select del tag visualizzato in verticale (comune-res).

Codice del modulo:

[comune comune-nas wrapper_class:esterno-oriz class:interno-oriz kind:evidenza_cessati]
[comune comune-res wrapper_class:esterno-vert class:interno-vert kind:attuali]

Nel nostro foglio di stile CSS (CSS personalizzato, o nel file .css del nostro child theme) andremo a definire gli attributi delle quattro classi come segue:

.esterno-oriz {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}
.interno-oriz {
	max-width: 10m;
}
.esterno-vert {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 1em 0;
}
.interno-vert {
	max-width: 10em;
}

Si noti che per le classi che gestiscono le select è stato impostato l’attributo “max-width”; l’impostazione di questo attributo (o dell’attributo “width”) è importante soprattutto nella visualizzazione orizzontale in quanto, se le select sono lasciate libere di allargarsi per tutto lo spazio disponibile, l’impostazione wrap dell’attributo “flex-wrap” comporterà comunque una visualizzazione orizzontale delle select stesse.