Balises d'amorçage Largeur d'entrée

Je suis en train d'utiliser bootstrap tagsinput dans un formulaire contenu dans un modal
comme ce

...
<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 contenant de forme.

Mise à JOUR
cette http://www.bootply.com/f43d1A0YxK reproduit le problème

Balises d'amorçage Largeur d'entrée

source d'informationauteur lowcoupling

  1. 35

    La raison pour laquelle vous voyez ce comportement est parce que bootstrap-tagsinput se cache en réalité l'origine input élément, et à sa place ajoute une div. Vous voyez un div élément dessiné pour ressembler à un Bootstrap élément d'entrée. De sorte que tout le CSS pour affecter l'entrée d'origine ne sera pas produit de changements.

    Ce que vous voulez changer est le .bootstrap-tagsinput classe:

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

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

  2. 7

    Ajouter display: block; à la .bootstrap-tagsinput classe dans votre CSS. Comme indiqué par Mohamad cette classe n'est pas présent dans votre propre code HTML, mais quand vous inspecter l'élément/afficher la source, vous pouvez voir que l'entrée est enveloppé dans un <div class="bootstrap-tagsinput">. 

    .bootstrap-tagsinput{
    display: block;
}

    Cela va écraser les display: inline-block; qui est hérité.

    Bootply Démo

  3. 2

    Cristian presque deviné

    quelque part en js:

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

    et en css:

    .bootstrap-tagsinput input {
  width: 10em;
}
  4. 0

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

    bootstrap-tagsinput.css

    Ces règles css sont automatiquement ajoutés à votre entrée lorsque vous ajoutez le 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 mettre à jour ces si ils ne sont pas au-dessus de la règle natif de bootstrap règle.

  5. -1

    La raison pour laquelle vous voyez ce comportement est parce que le style fait remplacer l'attribut width:

    style="width: 3em ! important;"

    Supprimer le style:

    $('.bootstrap-tagsinput > input').prop( "style", null );

    Cela devrait fonctionner correctement.

    En outre, définir la largeur désirée à l'aide des CSS:

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