Label e input appaiono sovrapposti

[Morpheu5]

Comportamento atteso

Usando il tema standard, ottengo questo:

Comportamento attuale

Usando bootstrap-italia, ottengo questo:

Contesto

Sto usando bootstrap-vue che con il seguente codice

<b-form>
    <b-form-group id="exampleInputGroup1"
        label="Email address:"
        label-for="exampleInput1"
        description="We'll never share your email with anyone else.">
    <b-form-input id="exampleInput1"
        type="email"
        v-model="email"
        required
        placeholder="Enter email">
    </b-form-input>
    </b-form-group>
</b-form>

genera il seguente HTML

<form>
    <div id="exampleInputGroup1" role="group" aria-labelledby="exampleInputGroup1__BV_label_" class="b-form-group form-group">
        <label id="exampleInputGroup1__BV_label_" for="exampleInput1" class="col-form-label pt-0">Email address:</label>
        <div>
            <input id="exampleInput1" type="email" required="required" placeholder="Enter email" aria-required="true" value=""
                class="form-control">
            <!---->
            <!---->
            <small id="exampleInputGroup1__BV_description_" class="form-text text-muted">We'll never share your email with anyone else.</small>
        </div>
    </div>
</form>

[francescozaia]

Ciao @Morpheu5, Intanto ti rispondo al volo, poi magari guardiamo meglio il dettaglio della tua richiesta.

Al fine di seguire precisamente le linee guida di UI, in alcuni contesti abbiamo dovuto modificare non soltanto il CSS ma anche il markup originale di Bootstrap, per cui è possibile che librerie come bootstrap-vue, per alcuni componenti, generino codice non funzionante per Bootstrap Italia.

In questo caso specifico, è possibile che il problema sia in realtà soltanto legato a selettori CSS che possono tranquillamente essere resi meno stringenti (mi riferisco a label e input contenuti in .form-group).

Ti consiglierei per ora l'utilizzo di un componente dedicato (come implementato nel kit open source per React; nel frattempo noi vediamo se riusciamo a rendere usabile il componente segnalato anche con il markup originale (non possiamo però darti tempi certi a riguardo).

[Morpheu5]

Ciao @francescozaia, grazie della risposta rapidissima!

Sospettavo che fosse qualcosa del genere. Per il momento mi accontento di piazzare un <br /> prima del campo, poi magari guardo meglio il kit per React, grazie del link! :)

[francescozaia]

Ho messo mano un po' agli input, come side-effect questa cosa dalla versione 0.30.0 potrebbe essere a posto.

[Morpheu5]

Ho provato di nuovo col codice che avevo incollato nel post originale, e la label si sovrappone ugualmente. Avevo risolto con questo

<b-form-group>
    <b-input id="email"
                v-model="email"
                type="email"
                name="email"
                autocomplete="email"
                required
    />
    <label :class="email !== '' ? 'active' : null" name="email" for="email">
        {{ $t('email_address') }}
    </label>
    <b-form-invalid-feedback>{{ $t(emailValidationFeedback) }}</b-form-invalid-feedback>
</b-form-group>

e mi sa che per il momento resto qui. Credo che parte del problema sia che, nel mio caso, usando BootstrapVue manca la parte di JS che assegna la classe corretta.

[francescozaia]

Chiudo con la conferma che il bug segnalato dipende dall'uso di BootstrapVue (che però non contiene i JS di cui necessita Bootstrap Italia per gestire la label che si sposta dinamicamente). Servirebbe un "BootrstapItaliaVue" che però non è nei piani nell'immediato.