web-dev-qa-db-fra.com

Bootstrap 4 Feedback non valide avec le groupe d’entrée non affiché

Je me suis penché sur Bootstrap 4 - version bêta, cependant, lorsque vous utilisez .is-invalid avec .input-group, il ne semble pas apparaître.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
  <label for="label">Label</label>
  <div class="input-group">

    <div class="input-group-addon">
      label
    </div>
    <input type="text" value="" name="label" class="form-control is-invalid">
  </div>

  <div class="invalid-feedback is-invalid">
    <strong>Invalid Label</strong>
  </div>
</div>

Comment voulez-vous afficher un message invalide lorsque vous utilisez .input-group?

L'ajout du code CSS suivant fonctionne comme une solution de contournement, mais cela semble étrange.

.form-group.is-invalid {
    .invalid-feedback {
        display: block;
    }
}
csstwitter-bootstrapbootstrap-4
6
Ian

Ils n'ont pas pris en compte leurs propres exemples en utilisant des addons et des boutons de groupe d'entrée, même avec un modèle de colonne. Le balisage ne facilite que les éléments "voisins", pas les éléments parents> voisins (il n'y a pas de règle CSS pour cela).

Il semble que pour le moment, vous devriez revenir à Alpha 6 ou programmer vos propres classes CSS en conséquence. J'ai fait la même chose, malheureusement. 

Veuillez noter lors de la lecture de ma réponse que cela a été posté au moment de la publication de la version bêta. :)

1
ReSpawN

Bootstrap 4 est très bogué. Ma suggestion est de remplacer:

 <div class="invalid-feedback">
 Text here
 </div>

Avec:

<div class="text-danger">
Text here
</div>

Et le second a pratiquement le même aspect et ne faillira pas. 

Pour un meilleur look, essayez:

<div class="text-danger">
<small>Text here</small>
</div>
4
JG Estiot

Pour que le résultat soit identique, vous pouvez utiliser un inline si, dans Laravel par exemple:

<input name="label" class="{{$errors->has('label') ? 'is-invalid' : '' }}">
                   @if ($errors->has('label'))
                       <div class="text-danger" role="alert">
                          <small>{{ $errors->first('code') }}</small>
                        </div>
                   @endif
0
Juan Carlos Ibarra

Exemple de travail avec une astuce utilisant flex-wrap et w-100:

<div class="form-group">
    <label class="form-control-label">Name</label>
    <div class="input-group flex-wrap">
        <span class="input-group-addon"><span class="fa fa-lock"></span></span>
        <input name="name" class="form-control is-invalid" type="text">
        <div class="invalid-feedback w-100">Custom error</div>
    </div>
</div>
0
manix