Componenti `radio` e `checkbox`: allineamento verticale della label errato all'interno di form-group

[lbertonicsc]

Esiste già una discussione sul tema che ti interessa, o su un tema simile?

• Ho verificato e non esiste

Versione della libreria

2.10.0

Cosa

Buongiorno,

vorrei portare alla vostra attenzione la seguente problematica.

Utilizzando input di tipo radio o checkbox all'interno di un div contrassegnato dalla classe form-group l'allineamento delle label risulta sfasato rispetto al radio/checkbox:

Es:

<div class="form-group">
  <div class="form-check">
    <input type="checkbox" id="ilmioid">
    <label for="ilmioid">Voglio aggiornare i dati del mio profilo con queste informazioni.</label>
  </div>
</div>

Da una mia indagine, questo è dovuto alla proprietà seguente:

Perché

Ritengo rilevante la segnalazione perché è corretto avere un allineamento verticale appropriato delle label di radiobutton e checkbox.

Contesto

No response

Altro

No response

[zetareticoli]

Ciao @lbertonicsc,

per quanto riguarda questi elementi form, il codice prevede l'uso della classe .form-check, come documentato:

<fieldset>
  <legend>Gruppo di radio</legend>
  <div class="form-check">
    <input name="gruppo1" type="radio" id="radio1" checked>
    <label for="radio1">Radio di esempio 1</label>
  </div>
  <div class="form-check">
    <input name="gruppo1" type="radio" id="radio2">
    <label for="radio2">Radio di esempio 2</label>
  </div>
</fieldset>

Se usi .form-group viene applicato lo stile da te evidenziato che agisce sulle label degli elementi <input type="text">.

[lbertonicsc]

Buongiorno @zetareticoli,

grazie per la risposta.

Come puoi vedere dal codice che ho riportato sopra uso già la classe form-check.

Uso form-group come da documentazione, quindi secondo me è un bug questo.

[zetareticoli]

In questi esempi di allineamento di più componenti radio o checkbox, non c'è uso della classe .form-group.

Posso concordare con te che non sia chiaro, però allo stato attuale della libreria, quella classe agisce sull'elemento label, modificandolo erroneamente.