web-dev-qa-db-fra.com

largeur d'entrée des étiquettes de démarrage

J'essaie d'utiliser bootstrap tagsinput dans un formulaire contenu dans un fichier modal like this

...
<div class="form-group">
                            <label for="myTagLabel">Tags:</label> 
                            <input class="form-control" id="myTag"  type="text" data-role="tagsinput">
                        </div>

Comme vous pouvez le voir dans l'image ci-dessus, je ne vois pas pourquoi l'entrée n'a pas la largeur du formulaire contenant.

UPDATE this http://www.bootply.com/f43d1A0YxK reproduit le problème

enter image description here

csstwitter-bootstraptwitter-bootstrap-3bootstrap-tags-input
16
lowcoupling

La raison pour laquelle vous constatez ce problème est que bootstrap-tagsinput masque l'élément input d'origine et à sa place, il ajoute div. Vous voyez un élément div stylé pour ressembler à un élément d’entrée Bootstrap. Ainsi, les CSS qui affectent l’entrée d’origine ne produiront aucun changement.

Ce que vous voulez changer, c'est la classe .bootstrap-tagsinput:

.bootstrap-tagsinput {
  width: 100% !important;
}

Voici une démo: http://www.bootply.com/1iATJfFM69

37
Mohamad

Ajoutez display: block; à la classe .bootstrap-tagsinput dans votre CSS. Comme l'a noté Mohamad, cette classe n'est pas présente dans votre propre code HTML, mais lorsque vous inspectez le source/l'élément source, vous pouvez voir que l'entrée est encapsulée dans un <div class="bootstrap-tagsinput">. 

.bootstrap-tagsinput{
    display: block;
}

Cela écrasera le display: inline-block; qui est hérité.

Démo Bootply

8
Dan

Cristian l'a presque deviné
quelque part en js:

$('.bootstrap-tagsinput > input').css('width', '');

et en css:

.bootstrap-tagsinput input {
  width: 10em;
}
2
John Smith

Je vois que le plugin tagsinput que vous utilisez est livré avec son propre fichier css.

bootstrap-tagsinput.css

Ces règles CSS sont automatiquement ajoutées à votre entrée lorsque vous ajoutez le paramètre data-role = "tagsinput".

.bootstrap-tagsinput {
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  display: inline-block;
  padding: 4px 6px;
  margin-bottom: 10px;
  color: #555;
  vertical-align: middle;
  border-radius: 4px;
  max-width: 100%;
  line-height: 22px;
  cursor: text;
}
.bootstrap-tagsinput input {
  border: none;
  box-shadow: none;
  outline: none;
  background-color: transparent;
  padding: 0;
  margin: 0;
  width: auto !important;
  max-width: inherit;          //Try change this to 100% !important;
  display: block;             // Add this in
}

Vous devez les mettre à jour pour éviter la règle de bootstrap native.

0
Tyler Evans