css - style - title html attribute

ancho de entrada de las etiquetas de arranque

Question

Estoy tratando de usar bootstrap tagsinput en una forma contenida en un modal como este

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

Como puede ver en la imagen de arriba, no puedo ver por qué la entrada no tiene el ancho del formulario que lo contiene.

ACTUALIZAR este http://www.bootply.com/f43d1A0YxK reproduce el problema

Answer 1

Añadir display: block; a la clase .bootstrap-tagsinput en tu CSS. Como señaló Mohamad, esta clase no está presente en su propio HTML, pero cuando inspecciona la fuente del elemento / vista puede ver que la entrada está envuelta en una <div class="bootstrap-tagsinput"> .

.bootstrap-tagsinput{
    display: block;
}

Esto sobrescribirá la display: inline-block; Eso se está heredando.

Demostración de Bootply

Answer 2

Cristian casi lo adivina
en algún lugar en js:

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

y en css:

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

Answer 3

La razón por la que está viendo este comportamiento es porque bootstrap-tagsinput realidad oculta el elemento de input original, y en su lugar agrega un div . Está viendo un elemento div un estilo que se parece a un elemento de entrada Bootstrap. Por lo tanto, cualquier CSS que afecte la entrada original no producirá ningún cambio.

Lo que quieres cambiar es la clase .bootstrap-tagsinput :

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

Aquí hay una demostración: http://www.bootply.com/1iATJfFM69

Answer 4

La razón por la que está viendo este comportamiento es porque el estilo en realidad anula el atributo de ancho:

style="width: 3em ! important;"

Eliminar el estilo:

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

Esto debería funcionar correctamente.

Además, establece el ancho deseado con CSS:

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

Answer 5

Veo que el complemento tagsinput que está utilizando viene con su propio archivo css.

bootstrap-tagsinput.css

Estas reglas de css se agregan automáticamente a su entrada cuando agrega el atributo 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
}

Debe actualizarlos para que no sobrepasen la regla nativa de arranque.