Problem z CSS na Twitterze Typehead z Bootstrap 3
Wraz z wydaniem Bootstrap 3. Typehead został usunięty na rzecz tego:
https://github.com/twitter/typeahead.js
Zintegrowałem go z powodzeniem przy zdalnym pobieraniu danych
Ale mam problem z autouzupełnianiem
Jak widać na polu tekstowym pojawiają się dwa teksty.
I ' ve included the css ( https://github.com/jharding/typeahead.js-bootstrap.css ) Jak napisano w dokumentacji, ale nie szczęście.
Każda pomoc lub sugestia będzie mile widziana.Jsfiddle pokazujący problem:
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 answers
EDIT: Aktualizacja dla Bootstrap 3.0 EDIT 2: typehead wywołanie zostało zmodyfikowane. Zobacz nowy jsfiddle
Po zabawie ze stylizacją wygląda na to, że Klasa form-control nie pasuje do TT-hint. Więc upewniłem się, że marginesy i granice się zgadzają. Na podstawie odpowiedzi Hieu Nguyena dodajemy border-radius i wsparcie dla input-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;
}
Skrypt dla input-small / input-large
$('.typeahead.input-sm').siblings('input.tt-hint').addClass('hint-small');
$('.typeahead.input-lg').siblings('input.tt-hint').addClass('hint-large');
Zaktualizowano jsfiddle: http://jsfiddle.net/KrtB5/542/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-12 19:33:49
Hmm wygląda na to, że {[1] } jest nową klasą w Bootstrap 3 RC i jest winowajcą tego problemu( bez wątpienia jest to tylko wersja RC z wieloma problemami), możesz po prostu skopiować styl tej klasy do klasy .tt-hint
. Więc:
.twitter-typeahead .tt-hint {
display: block;
height: 38px;
padding: 8px 12px;
font-size: 14px;
line-height: 1.428571429;
border: 1px solid transparent;
}
Praca: http://jsfiddle.net/KrtB5/2/
Aktualizacja która działa lepiej z jQuery 1.9.1 i Bootstrap 3.0.0: http://jsfiddle.net/KrtB5/13
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-19 17:36:55
Zobacz to:
$('#foo').typeahead(...);
$('.tt-hint').addClass('form-control');
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-17 09:47:05
Jest też nieoficjalny port wtyczki typu Bootstrap 2:
Nie wymaga żadnego dodatkowego CSS i działa z najnowszą wersją Bootstrap.
Oto demo na Plunker.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-01-21 21:17:05
Nie tylko. TT-hint to brocken, ale także inne klasy css.
Najlepszym rozwiązaniem, działającym we wszystkich przeglądarkach, jest dodanie dodatkowego css, który naprawia problemy css pomiędzy Typehead.js i Bootstrap 3:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-09 08:10:24
Jeśli używasz bootstrap.mniej, masz to o wiele łatwiejsze. BS 3 instaluje LESS 1.4.1, który teraz zawiera' extend'. Zobacz Less i Bootstrap: jak używać klasy span3 (lub spanX [dowolna liczba]) jako mixin?
Extend to zabójcza funkcja za mniej. Możesz teraz w pełni dziedziczyć (jawnie nazwane) klasy. Więc nie ma potrzeby kopiowania właściwości jak w odpowiedziach CSS Hieu Nguyena i Nicka P. LESS zrobi to wszystko z:
.twitter-typeahead .tt-hint:extend(.form-control all)
{}
.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
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:06:49
Kompleksowe rozwiązanie (zalecane w tym Zgłoś błąd w Typehead)
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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-02 05:06:29
To mi pomogło. Być może trzeba będzie grać z górnej i lewej liczby, aby uzyskać to prawo.
$('#typeahead').typeahead(...);
$(".tt-hint").css('top','3px');
$(".tt-hint").css('left','1px');
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-28 18:12:21
Na podstawie odpowiedzi Andreasa postawiłbym na:
.tt-hint {
.form-control;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-11-07 22:29:36
Rozwiązaniem, które wymyśliłem, było po prostu dodanie innej klasy CSS (from-group-lg) do mojego elementu form-group.
Mój 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>
W moim pliku scss dodałem:
.form-group-lg .tt-hint
{
@extend .input-lg;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-12-05 09:41:17
From Typeahead problems with Bootstrap 3.0 RC1 : Jak wspomniano przez [laurent-wartel] [2] try https://github.com/hyspace/typeahead.js-bootstrap3.less lub https://github.com/bassjobsen/Bootstrap-3-Typeahead dla dodatkowego CSS, aby użyć typehead.js with Bootstrap 3.1.0.
Lub użyj "starej" wtyczki (TB 2) z nowym silnikiem sugestii Bloodhound: https://github.com/bassjobsen/Bootstrap-3-Typeahead/issues/26
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:06:49
A cleaner Less solution
.tt-small {
.twitter-typeahead {
display: block !important; // Note: Override inline styles set by JavaScript
&> .tt-hint {
&:extend(.form-control);
color: @medium-gray;
}
}
}
Gdzie znacznik wygląda mniej więcej tak:
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-06-19 14:41:50
Kolejne podejście, aby Twitter Typehead do pracy z 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','');
Następnie w arkuszu stylów LESS możesz dodać:
// 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);
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-04 17:19:48
Nie trzeba przechodzić przez żadną z tych skomplikowanych implementacji, wystarczy dodać
style="position: relative"
Do elementu nadrzędnego. Używa pozycjonowania absolutnego, musi tylko wiedzieć, do jakiego "absolutnego" się odnosisz.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-09-04 16:11:05