Legend che viene troncato

[AlessandroVecchi]

Versione di Bootstrap Italia

Comportamento atteso

2.8.x

Comportamento attuale

Il <legend> viene troncato (vedi esempio costruito sulla documentazione di Bootstrap italia in https://italia.github.io/bootstrap-italia/docs/form/introduzione/)

  <fieldset>
    <legend>Esempio di un legend abbastanza lungo che viene troncato da mobile</legend>
    <div class="form-group col-md-6">
      <label for="formNome" class="">Nome</label>
      <input type="text" class="form-control" id="formNome">
    </div>
    <div class="form-group col-md-6">
      <label for="formCognome" class="">Cognome</label>
      <input type="text" class="form-control" id="formCognome">
    </div>
  </fieldset>

Questo è dovuto alla presenza delle seguenti regole css

fieldset legend {
  ...
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

A livello di usabilità ed accessibilità non è il massimo in quanto il tag può contenere informazioni necessarie alla compilazione del form che così risultano incomprensibili.

Possibili soluzioni

È sufficiente eliminare le tre regole indicate. In aggiunta si può impostare un line-height ridotto (es. 1.25).

[astagi]

@zetareticoli @Fupete lascio a voi designer la parola.