Ширина поля маркера начальной загрузки не может быть помещена в невидимый элемент div

Question

Я использовал Bootstrap Token Field на своем веб-сайте. Это прекрасно работает на моей веб-странице. Но проблема возникла, когда я поместил это поле токена в любой скрытый div. Я имею в виду, представьте, что есть скрытый div (display: none;Внутри этого невидимого div я поместил поле с токенами. Этот скрытый div будет виден после нажатия кнопки. В то же время, если я увижу выпадающий список / окно с предложением автозаполнения поля поля токена, я вижу, что ширина этого выпадающего окна не может быть полной шириной, когда в состоянии по умолчанию оно идеально. Я показываю вам фотографию, чтобы вы могли быть более четкими.

Это нормальное состояние поля токена:

Это условие, если оно остается в невидимом div. Посмотрите, ширина выпадающего списка не равна 100% в зависимости от поля ввода:

Вот моя скриптовая ссылка: http://jsfiddle.net/qV2E2/

Нажмите на ссылку "Показать", чтобы сделать видимым невидимый div

Я не понимаю, почему это произошло! Как сделать ширину выпадающего окна аналогичной ширине поля ввода?

Answer 1

Попробуйте, если хотите, чтобы это работало. Просто выполните javascript после того, как вы отобразите скрытый div, так что вы получите:

<div class="default">
    <input type="text" class="form-control tokenfield1" value="" />
</div>
<a href="#" class="show pull-right">Show</a>
<div class="clearfix"></div>
<div class="another">
    <input type="text" class="form-control tokenfield2" value="" />
</div>

А также:

$('.show').click(function() {
    $('.another').slideToggle();
    $('.tokenfield2').tokenfield({
  autocomplete: {
    source: ['Red City','Blue City','United Kingdom','Australia','United Sates','Finland','Bulgeriya','Hungary','Istambul'],
    delay: 100
  },
  showAutocompleteOnFocus: true
});
});

$('.tokenfield1').tokenfield({
  autocomplete: {
    source: ['Red City','Blue City','United Kingdom','Australia','United Sates','Finland','Bulgeriya','Hungary','Istambul'],
    delay: 100
  },
  showAutocompleteOnFocus: true
});

Answer 2

Вы можете использовать следующие функции щелчка. Получает внешнюю ширину поля ввода с классом tokenfield и назначает эту ширину для другого поля ввода

$('.show').click(function() {
    var width = $('.tokenfield').outerWidth();
    $('.another input').width(width);
    $('.another').slideToggle();
});