Ширина Bootstrap Typeahead с длинным текстом

У меня есть 4 входа, которые находятся в .col-md-3 следующим образом:

<div class="row">
    <div class="col-md-3">
        <input id="input1" type="text">
    </div>
    <div class="col-md-3">
        <input id="input2" type="text">
    </div>
    <div class="col-md-3">
        <input id="input3" type="text">
    </div>
    <div class="col-md-3">
        <input id="input4" type="text">
    </div>
</div>

Я использую плагин Typeahead. Мой js работает так, что Typeahead работает только на #input3:

$('#input3').typeahead({
      ajax: '/getdata.php'
});

Часть возвращаемого текста очень длинная (например, более 300 символов). Проблема в том, что он не помещается в раскрывающемся списке Typeahead. Он «перекрывает» внешнюю часть коробки следующим образом:

введите здесь описание изображения

Я прочитал расширение ширины бутстрапа для соответствия поле ввода, но ни один из них не исправит это для меня. Мне интересно, являются ли они устаревшими решениями.

Bootstrap версия 3.3.7


html css twitter-bootstrap typeahead
person Andy    schedule 24.07.2017    source источник
comment
Вам повезло с этим: ‹style› input { width: 100px; слово-разрыв: разбить все; }   -  person tim1234    schedule 24.07.2017
comment
Нет. Ничего не делает с шириной раскрывающегося списка.   -  person Andy    schedule 24.07.2017
comment
stackoverflow.com/questions/22276536 /   -  person Rachel Gallen    schedule 24.07.2017
comment
@ Энди, ты внедрил таблицу стилей bootstrap3 для ввода? github.com/hyspace/typeahead.js-bootstrap3.less.git Это должно решить проблему   -  person Rachel Gallen    schedule 24.07.2017

Ответы (3)


arrow_upward
1
arrow_downward

Если вы добавите overflow-x: hidden; (или auto/scroll, если вы хотите иметь возможность прокрутки), это должно сработать?

Надеюсь, атрибут overflow работает на вас.

РЕДАКТИРОВАТЬ: после небольшого поиска в Google я нашел статью, в которой задокументировано, что у Typeahead были проблемы с дизайном [относится, в частности, к вводу] во время разработки. там. Существует статья здесь, в которой это отмечено в конце и как это исправлено в конце.

Примечание: у typeahead js есть проблема с дизайном, пока мы используем его с twitter bootstrap 3. В этом руководстве я добавил исправления в css, а также вы должны добавить следующий скрипт jquery на основе размера элемента управления вводом.

JavaScript

$('.typeahead.input-sm').siblings('input.tt-hint').addClass('hint-small');
$('.typeahead.input-lg').siblings('input.tt-hint').addClass('hint-large');

$('.typeahead.input-sm').siblings('input.tt-hint').addClass('hint-small');
$('.typeahead.input-lg').siblings('input.tt-hint').addClass('hint-large');

Также нашел это 'fix' на github, созданное 'hyspace' - typeahead .js/bootstrap3.less

Вот jsfiddle пример кода, на котором основано исправление. Я разветвил его, чтобы настроить записи так, чтобы они содержали длинный текст, который в вашем случае будет переполняться. Как вы увидите, в поле ввода текста в скрипке вместо того, чтобы выходить за пределы поля, текст переносится.

Нажмите «H» во втором поле, чтобы увидеть пример этого.

(Обратите внимание, что скрипка использует только тот код, на котором основано исправление. Я не использовал typeahead.js-bootless3.less, но сомневаюсь, что вы должны жестко закодировать значения!На самом деле, прочитав страницу на github более внимательно, это стиль больше всего, что было скорректировано, а не js.)

person Rachel Gallen    schedule 24.07.2017
comment
вам, возможно, придется добавить !important, если переполнение уже задано в стиле. - person Rachel Gallen; 24.07.2017
comment
@ Энди, я только что заметил твою заметку об увеличении ширины. Не заметил этого. Я уберу это. ссылка на демонстрацию typeahead: plugins.upbootstrap.com/assets/js/ bootstrap-typeahead.min.js - person Rachel Gallen; 24.07.2017
comment
@Энди, даже не с !important? ты это добавил? - person Rachel Gallen; 24.07.2017
comment
Я разместил скрипт: jsfiddle.net/rL4vrvs0/1. К сожалению, там он работает нормально, без каких-либо модификаций. Если вы перейдете к третьему вводу и наберете s, появится длинный вариант. Но в моем приложении он обрезает раскрывающийся список, поэтому он имеет ту же ширину, что и ввод. Я этого не понимаю, но предполагаю, что это какой-то другой CSS или конфликт в моем приложении. - person Andy; 24.07.2017
comment
попробуйте добавить оболочку - см. также эту проблему github.com/twitter/typeahead.js/issues /855 и отмеченное исправление - может сработать? - person Rachel Gallen; 24.07.2017
comment
@Энди, ну какая радость? Я заметил, что вы не используете раскрывающийся список typeahead 'tt-' в своей скрипке ... если вы его настроите, это сработает? - person Rachel Gallen; 24.07.2017
comment
Неа. Я добавил .wrapper к input и соответствующий CSS. Не имеет значения, в моем приложении. На скрипке нормально работает. Это должно быть что-то еще в CSS/js моего приложения, которое делает это. Я продолжу искать. Большое спасибо за вашу помощь. - person Andy; 24.07.2017
comment
Давайте продолжим обсуждение в чате. - person Andy; 24.07.2017

arrow_upward
0
arrow_downward

Попробуйте добавить стиль CSS:

white-space: normal;
person Bryan Labuschagne    schedule 24.07.2017
comment
Боюсь, без разницы. Другие значения, такие как nowrap, тоже не работают. - person Andy; 24.07.2017

arrow_upward
0
arrow_downward

Я смог решить эту проблему, добавив стиль css, установив для ширины максимальное содержимое:

.dropdown-menu {
  width: max-content;
  text-align: left;
}
person Jaleel Ahmed    schedule 19.11.2019