Расширяя ширину типа bootstrap, чтобы соответствовать полю ввода

Я знаю, что этот вопрос задавали по крайней мере три раза раньше, но ответ, который я видел, не был тем, что я искал. Я хочу увеличить ширину поля автозаполнения, которое генерирует twitter bootstrap с помощью функции typeahead. Я читал, что он растягивается, чтобы покрыть весь текст в поле. то есть чем длиннее текст, тем шире поле автозаполнения. Однако я бы хотел, чтобы это был span6, потому что это то, насколько широкое поле поиска. Есть идеи? Я видел несколько ответов jquery, но я не мог следовать за ними.

Ответ 1

Майкл Уотсон дал то, что я считаю самым простым ответом в его комментарии.

.twitter-typeahead { width: 100%; }

Обновление # 1:. Основываясь на комментариях ниже (спасибо Стиву, Виши), сделайте то же самое для .tt-hint, .tt-input, .tt-dropdown-menu.

Обновление № 2:. Сообщает, что .tt-dropdown-menu теперь .tt-menu, поэтому конечный результат

.twitter-typeahead, .tt-hint, .tt-input, .tt-menu { width: 100%; }

Ответ 2

Выпадающее меню - это ul с классами typeahead dropdown-menu, вы можете использовать CSS, чтобы установить его ширину:

.dropdown-menu
{
 width: .... px;
}

Ширина span6 не является статической, поэтому вам потребуются некоторые медиа-запросы, чтобы сделать ее отзывчивой.

Для Bootstrap 3 функция typeahead удаляется из TB3 вместо https://github.com/twitter/typeahead.js/. ~~Вам понадобится дополнительный CSS, чтобы интегрировать его с Twitter Bootstrap.~~ Вам нужно загрузить некоторый дополнительный CSS в порядке чтобы получить раскрывающееся меню typeahead.js, чтобы соответствовать теме Bootstrap по умолчанию. Попробуйте расширенный Bootstrap LESS или если вы ищете более расширенную версию, попробуйте: typeahead.js-bootstrap3.less.

В раскрывающемся меню с классом меню .tt-dropdown. Вместо изменения CSS вы также можете установить динамику ширины. С typeahead класс вашего входного тега typeahead:

$('.typeahead').typeahead({})
on('typeahead:opened',function(){$('.tt-dropdown-menu').css('width',$('.typeahead').width() + 'px');});

Ответ 3

Чтобы выпадающее меню соответствовало ширине поля, вы хотели бы что-то вроде этого:

$(document).on('typeahead:opened', function(event, datum) {
  var width = $(event.target).width();
  $('.tt-dropdown-menu').width(width);
});

Небольшое улучшение приведенного выше с помощью event.target и глобального прослушивателя документов.

Ответ 4

Я использую Bootstrap 3.2.0 с typeahead.js-bootstrap3.less и вложил вход в divs следующим образом:

<div class="form-group">
    <label>my label</label>
    <div class="col-md-4">
        <div class="input-group tt-input-group">
            <input id="mytypeahead" class="form-control" />
        </div>
    </div>
</div>

Мне также нужно было добавить это в мой css:

.tt-input-group {
    width: 100%;
}

Ответ 5

Это для более новых версий:

.twitter-typeahead, .tt-menu 
{
  display: block !important;
}