Проблема CSS в Twitter Typeahead с Bootstrap 3
С выпуском Bootstrap 3. Typeahead был удален в пользу этого:
https://github.com/twitter/typeahead.js
Ive интегрировал его успешно на удаленной выборке данных
но у меня проблема с автозаполнением
Как вы можете видеть, в текстовом поле появляются два текста.
Я включил css (https://github.com/jharding/typeahead.js-bootstrap.css) как сказано в документации, но не повезло.
любая помощь или предложения будут оценены.
jsfiddle показывает проблему:
http://jsfiddle.net/KrtB5/
HTML-код
<body>
<div class="container">
<label>State</label> <input type="text" class="typeahead form-control" />
</div>
</body>
Javascript:
$('.typeahead').typeahead({
name: 'Some name',
local: ['test', 'abc', 'def']
})
14 ответов
EDIT: обновлено для Bootstrap 3.0 EDIT 2: был изменен вызов Typeahead. См. новый jsfiddle
после игры со стилем похоже, что класс управления формой не совсем соответствует TT-подсказке. Поэтому я убедился, что границы и границы совпадают. Принимая ответ Hieu Nguyen и добавляя border-radius и поддержку ввода-small / input-large
в CSS
.twitter-typeahead .tt-hint
{
display: block;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
border: 1px solid transparent;
border-radius:4px;
}
.twitter-typeahead .hint-small
{
height: 30px;
padding: 5px 10px;
font-size: 12px;
border-radius: 3px;
line-height: 1.5;
}
.twitter-typeahead .hint-large
{
height: 45px;
padding: 10px 16px;
font-size: 18px;
border-radius: 6px;
line-height: 1.33;
}
сценарий для вход-маленький / вход-большой
$('.typeahead.input-sm').siblings('input.tt-hint').addClass('hint-small');
$('.typeahead.input-lg').siblings('input.tt-hint').addClass('hint-large');
Обновлено jsfiddle:http://jsfiddle.net/KrtB5/542/
Хмм, похоже на .form-control
это новый класс в Bootstrap 3 RC, и это виновник этой проблемы (без сомнения, это только версия RC со многими проблемами), вы можете просто скопировать стиль этого класса в .tt-hint
класса. Итак:
.twitter-typeahead .tt-hint {
display: block;
height: 38px;
padding: 8px 12px;
font-size: 14px;
line-height: 1.428571429;
border: 1px solid transparent;
}
рабочая скрипка:http://jsfiddle.net/KrtB5/2/
обновление который лучше работает с jQuery 1.9.1 и Bootstrap 3.0.0:http://jsfiddle.net/KrtB5/13
существует также неофициальный порт плагина Bootstrap 2 typeahead:
Он не требует каких-либо дополнительных CSS, и он работает с последней версией Bootstrap.
здесь демо на Plunker.
не только .TT-подсказка brocken, но и другие css-классы тоже.
лучшим решением, работающим во всех браузерах, является добавление дополнительного css, который устраняет проблемы css между Typeahead.js и Bootstrap 3:
Если вы используете bootstrap.меньше, у вас это намного проще. BS 3 устанавливает меньше 1.4.1, который теперь включает в себя "расширить" доброту. см.меньше и Bootstrap: как использовать класс span3 (или spanX [любое число]) в качестве mixin?
Extend-это функция убийцы для меньшего количества. Теперь вы можете полностью наследовать (явные именованные) классы. Поэтому нет необходимости копировать свойства, как в CSS-ответах Hieu Nguyen и Nick P. Меньше будет делать все это с:
.twitter-typeahead .tt-hint:extend(.form-control all)
{}
в https://github.com/jharding/typeahead.js-bootstrap.css/blob/master/typeahead.js-bootstrap.less меньше кода сломленн для BS 3. Я использовал его в качестве отправной точки, а также добавил, что раскрывающийся список не переносится в соответствии с типом BS 2. Мой последний файл less:
.tt-dropdown-menu
{
min-width: 160px;
margin-top: 2px;
padding: 5px 0;
/* from BS dropdowns.less .dropdown-menu */
/* background-color: @dropdownBackground;*/
background-color: @dropdown-bg;
/*
border: 1px solid #ccc;
border: 1px solid @dropdownBorder;
border: 1px solid @dropdownBorder;*/
border: 1px solid @dropdown-fallback-border; // IE8 fallback
border: 1px solid @dropdown-border;
*border-right-width: 2px;
*border-bottom-width: 2px;
/*BS2 replaced with BS dropdowns.less .dropdown-menu*/
/*.border-radius(6px);*/
border-radius: 6px;
/*.box-shadow(0 5px 10px rgba(0,0,0,.2));
-webkit-background-clip: padding-box;
-moz-background-clip: padding;*/
.box-shadow(0 6px 12px rgba(0,0,0,.175));
background-clip: padding-box;
}
.tt-suggestion
{
display: block;
padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor
{
/*color: @dropdownLinkColorHover;
#gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));*/
color: @dropdown-link-hover-color;
background-color: @dropdown-link-hover-bg;
}
.tt-suggestion.tt-is-under-cursor a
{
/*color: @dropdownBackground;*/
color: @dropdown-bg;
}
.tt-suggestion > p
{
margin: 0;
white-space: nowrap !important; //dont conform suggestion to parent input width
}
/*https://stackoverflow.com/questions/18059161/css-issue-on-twitter-typeahead-with-bootstrap-3*/
.twitter-typeahead
{
display: block;
width: 100%; //BS 3 needs this to inherit this for children
}
.twitter-typeahead .tt-hint:extend(.form-control all)
{
color: @input-color-placeholder; //show hint distinct from input
}
комплексное решение (рекомендуется в этой сообщить об ошибке на Typeahead)
https://github.com/hyspace/typeahead.js-bootstrap3.less/blob/master/typeahead.css
/*
* typehead.js-bootstrap3.less
* @version 0.2.3
* https://github.com/hyspace/typeahead.js-bootstrap3.less
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/MIT
*/
.has-warning .twitter-typeahead .tt-input,
.has-warning .twitter-typeahead .tt-hint {
border-color: #8a6d3b;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-warning .twitter-typeahead .tt-input:focus,
.has-warning .twitter-typeahead .tt-hint:focus {
border-color: #66512c;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
}
.has-error .twitter-typeahead .tt-input,
.has-error .twitter-typeahead .tt-hint {
border-color: #a94442;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-error .twitter-typeahead .tt-input:focus,
.has-error .twitter-typeahead .tt-hint:focus {
border-color: #843534;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
}
.has-success .twitter-typeahead .tt-input,
.has-success .twitter-typeahead .tt-hint {
border-color: #3c763d;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-success .twitter-typeahead .tt-input:focus,
.has-success .twitter-typeahead .tt-hint:focus {
border-color: #2b542c;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
}
.input-group .twitter-typeahead:first-child .tt-input,
.input-group .twitter-typeahead:first-child .tt-hint {
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
}
.input-group .twitter-typeahead:last-child .tt-input,
.input-group .twitter-typeahead:last-child .tt-hint {
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
}
.input-group.input-group-sm .twitter-typeahead .tt-input,
.input-group.input-group-sm .twitter-typeahead .tt-hint {
height: 30px;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
select.input-group.input-group-sm .twitter-typeahead .tt-input,
select.input-group.input-group-sm .twitter-typeahead .tt-hint {
height: 30px;
line-height: 30px;
}
textarea.input-group.input-group-sm .twitter-typeahead .tt-input,
textarea.input-group.input-group-sm .twitter-typeahead .tt-hint,
select[multiple].input-group.input-group-sm .twitter-typeahead .tt-input,
select[multiple].input-group.input-group-sm .twitter-typeahead .tt-hint {
height: auto;
}
.input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) .tt-input,
.input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) .tt-hint {
border-radius: 0;
}
.input-group.input-group-sm .twitter-typeahead:first-child .tt-input,
.input-group.input-group-sm .twitter-typeahead:first-child .tt-hint {
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.input-group.input-group-sm .twitter-typeahead:last-child .tt-input,
.input-group.input-group-sm .twitter-typeahead:last-child .tt-hint {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
}
.input-group.input-group-lg .twitter-typeahead .tt-input,
.input-group.input-group-lg .twitter-typeahead .tt-hint {
height: 46px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
select.input-group.input-group-lg .twitter-typeahead .tt-input,
select.input-group.input-group-lg .twitter-typeahead .tt-hint {
height: 46px;
line-height: 46px;
}
textarea.input-group.input-group-lg .twitter-typeahead .tt-input,
textarea.input-group.input-group-lg .twitter-typeahead .tt-hint,
select[multiple].input-group.input-group-lg .twitter-typeahead .tt-input,
select[multiple].input-group.input-group-lg .twitter-typeahead .tt-hint {
height: auto;
}
.input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) .tt-input,
.input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) .tt-hint {
border-radius: 0;
}
.input-group.input-group-lg .twitter-typeahead:first-child .tt-input,
.input-group.input-group-lg .twitter-typeahead:first-child .tt-hint {
border-bottom-left-radius: 6px;
border-top-left-radius: 6px;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.input-group.input-group-lg .twitter-typeahead:last-child .tt-input,
.input-group.input-group-lg .twitter-typeahead:last-child .tt-hint {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-bottom-right-radius: 6px;
border-top-right-radius: 6px;
}
.twitter-typeahead {
width: 100%;
}
.input-group .twitter-typeahead {
display: table-cell !important;
float: left;
}
.twitter-typeahead .tt-hint {
color: #999999;
}
.twitter-typeahead .tt-input {
z-index: 2;
}
.twitter-typeahead .tt-input[disabled],
.twitter-typeahead .tt-input[readonly],
fieldset[disabled] .twitter-typeahead .tt-input {
cursor: not-allowed;
background-color: #eeeeee !important;
}
.tt-dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
min-width: 160px;
width: 100%;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
font-size: 14px;
background-color: #ffffff;
border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
background-clip: padding-box;
*border-right-width: 2px;
*border-bottom-width: 2px;
}
.tt-dropdown-menu .tt-suggestion {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333333;
white-space: nowrap;
}
.tt-dropdown-menu .tt-suggestion.tt-cursor {
text-decoration: none;
outline: 0;
background-color: #f5f5f5;
color: #262626;
}
.tt-dropdown-menu .tt-suggestion.tt-cursor a {
color: #262626;
}
.tt-dropdown-menu .tt-suggestion p {
margin: 0;
}
это сработало для меня. Возможно, вам придется играть с верхними и левыми номерами, чтобы получить его право.
$('#typeahead').typeahead(...);
$(".tt-hint").css('top','3px');
$(".tt-hint").css('left','1px');
основываясь на ответе Андреаса, я бы поставил на следующее, используя меньше:
.tt-hint {
.form-control;
}
решение, которое я придумал, состояло в том, чтобы просто добавить другой класс CSS (из-group-lg) в мой элемент form-group.
мой HTML:
<div class="form-group form-group-lg">
<label class="control-label" for="my-large-typeahead">Type to automcoplete:</label>
<input type="text" class="form-control typeahead" id="my-large-typeahead">
</div>
в моем файле scss я добавил:
.form-group-lg .tt-hint
{
@extend .input-lg;
}
с проблемы с Typeahead с Bootstrap 3.0 RC1: Как упоминалось [laurent-wartel] [2] попробуйте https://github.com/hyspace/typeahead.js-bootstrap3.less или https://github.com/bassjobsen/Bootstrap-3-Typeahead для дополнительного CSS использовать typeahead.js с Bootstrap 3.1.0.
или использовать Используйте" старый " (TB 2) плагин с новым Bloodhound suggestion engine: https://github.com/bassjobsen/Bootstrap-3-Typeahead/issues/26
уборщик менее
.tt-small {
.twitter-typeahead {
display: block !important; // Note: Override inline styles set by JavaScript
&> .tt-hint {
&:extend(.form-control);
color: @medium-gray;
}
}
}
где разметка выглядит примерно так:
<div class="form-group">
<label class="col-lg-3 col-sm-3 control-label" for="mydropdown">Dropdown</label>
<div class="col-lg-6 col-sm-6 tt-mydropdown tt-small">
<input class="form-control" id="mydropdown" placeholder="Dropdown" type="text">
</div> <!-- tt-small end -->
</div>
другой подход, чтобы сделать Twitter Typeahead для работы с Bootstrap 3.
// Using jQuery, we remove the inline styles compulsively added by Twitter Typeahead.
// We need to do this because, if not, styles on our stylesheets won't be able to
// override those inline styles.
$('.twitter-typeahead, .typeahead').attr('style','');
затем в таблицу стилей можно добавить следующее:
// Twitter Typeahead
.twitter-typeahead {
position: relative;
.tt-hint {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: @input-bg;
border: none;
}
.tt-input {
position: relative;
vertical-align: top;
}
.tt-hint + .tt-input {
background-color: transparent;
}
.tt-dropdown-menu {
&:extend(.dropdown-menu all);
}
.tt-suggestion {
&:extend(.dropdown-menu > li > a all);
p {
margin-bottom: 0;
}
}
.tt-cursor {
&:extend(.dropdown-menu > .active > a all);
}
}
нет необходимости проходить через любую из этих сложных реализаций, просто добавьте
style="position: relative"
к родительскому элементу. Он использует абсолютное позиционирование, ему просто нужно знать, что такое "абсолют", о котором вы говорите.