Ширина входных меток загрузки

Я пытаюсь использовать bootstrap tagsinput в форме, содержащейся в модальном как это

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

Как вы можете видеть на изображении выше, я не вижу, почему вход не имеет ширины содержащейся формы.

UPDATE этот http://www.bootply.com/f43d1A0YxK воспроизводит проблему

enter image description here

Ответы

Ответ 1

Причина, по которой вы видите это поведение, состоит в том, что bootstrap-tagsinput фактически скрывает исходный элемент input, а вместо него добавляет div. Вы видите элемент div, который будет выглядеть как элемент ввода Bootstrap. Таким образом, любой CSS, влияющий на исходный ввод, не вносит никаких изменений.

Что вы хотите изменить, это класс .bootstrap-tagsinput:

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

Вот демо: http://www.bootply.com/1iATJfFM69

Ответ 2

Добавьте display: block; в класс .bootstrap-tagsinput в вашем CSS. Как отметил Мохамад, этот класс отсутствует в вашем собственном HTML, но когда вы проверяете источник element/view, вы можете видеть, что ввод завернут в <div class="bootstrap-tagsinput">.

.bootstrap-tagsinput{
    display: block;
}

Это перезапишет display: inline-block;, который наследуется.

Демо-версия Bootply

Ответ 3

Кристиан почти догадался, что это
где-то в js: 

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

и в css:

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

Ответ 4

Я вижу, что плагин tagsinput, который вы используете, имеет свой собственный файл css.

bootstrap-tagsinput.css

Эти правила CSS автоматически добавляются к вашему вводу при добавлении 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
}

Вам необходимо обновить их, чтобы они не выполняли правило собственного бутстрапа.

Ответ 5

Причина, по которой вы видите это поведение, заключается в том, что стиль фактически переопределяет атрибут width:

style="width: 3em ! important;"

Удалите стиль:

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

Это должно работать должным образом.

Кроме того, задайте нужную ширину с помощью CSS:

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