Numéro CSS sur Twitter Typeahead avec Bootstrap 3
avec la sortie de Bootstrap 3. Typeahead a été retiré en faveur de ce:
https://github.com/twitter/typeahead.js
Je l'ai intégré avec succès sur la récupération à distance des données
mais Im avoir des problèmes avec l'auto-complétion
comme vous pouvez le voir, il y a deux textes qui apparaissent sur la zone de texte.
j'ai inclus le css ( https://github.com/jharding/typeahead.js-bootstrap.css ) comme dit dans la documentation mais pas de chance.
toute aide ou suggestion serait appréciée.
jsfiddle montrant la question:
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 réponses
EDIT: mis à Jour pour Bootstrap 3.0 EDIT 2: Typeahead call a été modifié. Voir nouveau jsfiddle
après avoir joué avec le style, il semble que la classe form-control ne s'aligne pas tout à fait avec le TT-hint. J'ai donc veillé à ce que les marges et les bordures s'alignent. La prise de Hieu Nguyen réponse et en ajoutant border-radius et de soutien pour l'entrée-petit/entrée-grand
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;
}
Script pour l'entrée-petit/entrée-grand
$('.typeahead.input-sm').siblings('input.tt-hint').addClass('hint-small');
$('.typeahead.input-lg').siblings('input.tt-hint').addClass('hint-large');
Updated jsfiddle: http://jsfiddle.net/KrtB5/542 /
hmm il ressemble à .form-control est une nouvelle classe dans Bootstrap 3 RC et c'est un coupable de ce problème (sans doute ce n'est que la version RC avec de nombreux problèmes), vous pouvez simplement copier le style de cette classe à .tt-hint classe. So:
.twitter-typeahead .tt-hint {
display: block;
height: 38px;
padding: 8px 12px;
font-size: 14px;
line-height: 1.428571429;
border: 1px solid transparent;
}
violon de travail: http://jsfiddle.net/KrtB5/2 /
mise à jour qui fonctionne mieux avec jQuery 1.9.1 et Bootstrap 3.0.0: http://jsfiddle.net/KrtB5/13
Check this out:
$('#foo').typeahead(...);
$('.tt-hint').addClass('form-control');
il y a aussi un port non officiel du plugin Bootstrap 2 typehead:
il ne nécessite pas de CSS supplémentaire et il fonctionne avec la dernière version de Bootstrap.
voici un demo sur Plunker.
Non seulement .tt-indice est brocken, mais d'autres css-les classes trop.
la meilleure solution, qui fonctionne dans tous les navigateurs, est d'ajouter le css supplémentaire, qui répare les problèmes css entre Typeahead.js et Bootstrap 3:
si vous utilisez bootstrap.moins, vous avez beaucoup plus facile. BS 3 installe moins de 1.4.1 qui inclut maintenant la qualité "extend". voir Less et Bootstrap: comment utiliser une classe span3 (ou spanX [n'importe quel nombre]) comme mixin?
Extend est une caractéristique de tueur pour moins maintenant. Vous pouvez maintenant hériter entièrement des classes (explicitement nommées). Donc pas besoin de copier les propriétés comme dans les réponses CSS de Hieu Nguyen et Nick P. MOINS sera de tout faire avec:
.twitter-typeahead .tt-hint:extend(.form-control all)
{}
le https://github.com/jharding/typeahead.js-bootstrap.css/blob/master/typeahead.js-bootstrap.less moins le code est cassé pour BS 3. Je l'ai utilisé comme point de départ, et j'ai aussi ajouté faire le dropdown pas mot wrap comme selon la typeahead BS 2. Mon dernier dossier moins est:
.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
}
une solution complète (recommandée dans ce rapport de bogue en tête de TypeA)
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;
}
ça a marché pour moi. Vous devrez peut-être jouer avec en haut et à gauche des numéros.
$('#typeahead').typeahead(...);
$(".tt-hint").css('top','3px');
$(".tt-hint").css('left','1px');
basé dans la réponse D'Andreas je parierais pour les suivants en utilisant moins:
.tt-hint {
.form-control;
}
la solution que j'ai trouvée était simplement d'ajouter une autre classe CSS (from-group-lg) à mon élément form-group.
My 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>
dans mon fichier scss j'ai ajouté:
.form-group-lg .tt-hint
{
@extend .input-lg;
}
à Partir de Typeahead problèmes avec Bootstrap 3.0 RC1 : Comme mentionné par [laurent-wartel] [2] try https://github.com/hyspace/typeahead.js-bootstrap3.less ou https://github.com/bassjobsen/Bootstrap-3-Typeahead pour les feuilles de style CSS supplémentaires à utiliser comme entête de TypeA.js avec Bootstrap 3.1.0.
ou utilisez le plugin "old" (TB 2) avec le nouveau moteur à suggestion Bloodhound: https://github.com/bassjobsen/Bootstrap-3-Typeahead/issues/26
Un nettoyeur de Moins de solution
.tt-small {
.twitter-typeahead {
display: block !important; // Note: Override inline styles set by JavaScript
&> .tt-hint {
&:extend(.form-control);
color: @medium-gray;
}
}
}
où le markup ressemble à quelque chose comme:
<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>
une autre approche pour rendre Twitter Typeahead de travailler avec 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','');
alors, dans votre feuille de style, vous pouvez ajouter ce qui suit:
// 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);
}
}
pas besoin de passer par l'une de ces implémentations compliquées, il suffit d'ajouter
style="position: relative"
à l'élément parent. Il utilise le positionnement absolu, il a juste besoin de savoir à quoi "absolu" vous faites référence.