Visibilità Checkbox

[danielebarisano]

Salve, sto usando CF7 su Wordpress ed è la prima volta che inserendo la checkbox di accettazione non è visibile. Questa è la pagina https://iwelditalia.com/wordpress/index.php/assistenza/
In basso prima del pulsante Invia e affianco la scritta Informativa Privacy c'è una checkbox che non è visibile. Potete indicarmi il codice CSS per renderla visibile?

[KillerWorm]

Ciao

Risposta breve:

Aggiungi una regola al tuo CSS personalizzato, del tipo:

.wpcf7 input[type=checkbox]{
    width: auto;
}

.
Risposta farcita:
Quando si presentano dei problemi simili è sempre bene testare la pagina su diversi browser per poter inquadrare meglio le possibili cause. In questo caso può essere utile sapere che ci sono delle differenze provando su diversi browser: su FF e su IE/Edge non si presenta il problema, quel checkbox è visibile, mentre il problema si presenta su Chrome e Safari dove il checkbox non si vede.

Questo fa capire che le cause sono da ricercare o in qualche errore del markup o nel modo in cui ciascun browser interpreta particolari situazioni del boxmodel. In questo caso è la seconda.

Andando al sodo, la causa sta in una regola del CSS personalizzato, questa:

/* caselle di input form */
.wpcf7 input{
    width:100%;
}

.
Da quel che ho visto, suppongo che questa sia una impostazione per far estendere a tutta larghezza i campi di testo (cioè gli elementi input di tipo text) ma, non essendo specificato il tipo in quel selettore, è applicata anche ai checkbox e sostanzialmente a tutti i tipi di elementi input.

Quando si imposta width:100% (o, in generale, un valore percentuale) l'elemento si allarga in base alla larghezza disponibile del proprio genitore ma, perché questo funzioni, il genitore dovrebbe avere una propria larghezza dichiarata o determinata in base al suo contenuto o in base ad un qualche elemento ascendente che è di tipo block-level e per il quale sia possibile determinarne a priori la larghezza.

La cosa è un po' contorta ma è stabilita secondo l'algoritmo usato per il box-model CSS (c'è indicato da qualche parte ma non ho voglia di cercare la fonte), e qui casca l'asino, perché poi ciascun browser vendor interpreta a proprio modo le specifiche stabilite.

Sostanzialmente, nella tua pagina gli input testuali sono posti ciascuno dentro un elemento inline (che non può influire sul calcolo della larghezza) ma a sua volta, questo è messo dentro un elemento <p>, quindi block-level, che di norma si estende per tutta la larghezza e quindi determina a sua volta la larghezza di quell'elemento input, suo discendente. Questo accade su tutti i browser.

Invece quegli elementi input checkbox hanno un ascendente impostato come "inline-block" che ha sia caratteristiche degli elementi inline sia caratteristiche degli elementi block-level; per cui elementi di questo tipo possono stare nel flusso del testo e normalmente assumono la larghezza stabilita dal proprio contenuto (se non diversamente specificata, quindi risulterà 0 se non contengono nulla), come per gli elementi inline, ma è possibile specificare la larghezza anche a prescindere dal contenuto, come per gli elementi block-level.

Questo tipo di elementi è comunque preso in considerazione per il calcolo della larghezza percentuale dei discendenti.

Il problema, nella tua pagina, sta nel fatto che per questo elemento inline-block (ascendente di quel checkbox) non è stata impostata una larghezza e non contiene nient'altro che quel checkbox, per cui questa dovrebbe essere calcolata in base al contenuto, ma il contenuto stesso (quel checkbox) ha una larghezza che deve essere calcolata in base a quella del suo ascendente... insomma, un cane che si morde la coda

Da qui, le divergenze dei vendor sul modo di risolvere la questione.

Per FF, Edge & company (da quello che suppongo) il valore di quel width:100% è impossibile calcolarlo e quindi è come se non venisse preso in considerazione, per cui il checkbox (in questo specifico caso) ha una larghezza calcolata in base al suo stesso ingombro (come per qualsiasi elemento inline)

Per CH, Safari & company, il valore di quel width:100% deve comunque essere calcolato in base al suo ascendente block-level, che in questo specifico caso si tratta di quello span inline-block a cui non è stata specificata una larghezza; per cui la questione viene risolta semplicemente stabilendo che la larghezza in questo caso è 0. Infatti quel checkbox ha larghezza 0.

In conclusione:
Chiaramente c'è un problema di fondo; presumo che quella regola debba essere applicata solo agli input testuali, in modo che si dispongano a tutta larghezza, ma non abbia senso applicarla ad altri tipi di elementi input (come i checkbox).

Per risolvere semplicemente, potresti quindi applicare una nuova regola come quella indicata nella mia risposta breve, magari specificando (se ti serve) anche altri tipi di elementi oltre checkbox, ad esempio anche radio o altro.

Una cosa del genere:

.wpcf7 input[type=checkbox],
.wpcf7 input[type=radio] {
    width: auto;
}