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.