Problème de CSS sur Twitter Typeahead avec Bootstrap 3

Question

Problème de CSS sur Twitter Typeahead avec Bootstrap 3

Demandé el 5 de Août, 2013: Quand la question a-t-elle été
32532 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Avec la sortie de Bootstrap 3. Typeahead a été supprimé au profit de celui-ci :
https://github.com/twitter/typeahead.js

Je l'ai intégré avec succès dans la récupération de données à distance.

mais j'ai des problèmes avec l'autocomplétion.

enter image description here

comme vous pouvez le voir, deux textes apparaissent dans la zone de texte.

J'ai inclus le css ( https://github.com/jharding/typeahead.js-bootstrap.css ) comme indiqué dans la documentation mais sans succès.

Toute aide ou suggestion serait appréciée.

jsfiddle montre le problème :
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']
})

Demandé el 5 de Août, 2013 par Daskul

Answer 1

5 Réponses

Answer 2

58voto

Nick P Points 687

EDIT : Mise à jour pour Bootstrap 3.0 EDIT 2 : L'appel Typeahead a été modifié. Voir le nouveau jsfiddle

Après avoir joué avec le style, il semble que la classe du contrôle de formulaire ne s'aligne pas tout à fait avec le tt-hint. J'ai donc fait en sorte que les marges et les bordures soient alignées. J'ai repris la réponse de Hieu Nguyen et ajouté border-radius et la prise en charge de 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;
}

script pour input-small/input-large

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

Mise à jour de jsfiddle : http://jsfiddle.net/KrtB5/542/

Répondu el 5 de Août, 2013 par Nick P (687 Points )

Answer 3

16voto

Hieu Nguyen Points 4825

Hmm il semble que .form-control est une nouvelle classe dans Bootstrap 3 RC et c'est le coupable de ce problème (il ne fait aucun doute qu'il s'agit d'une version RC avec de nombreux problèmes), vous pouvez simplement copier le style de cette classe à .tt-hint classe. Donc :

.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

Répondu el 5 de Août, 2013 par Hieu Nguyen (4825 Points )

Answer 4

14voto

Andreas Points 343

Regarde ça :

$('#foo').typeahead(...);
$('.tt-hint').addClass('form-control');

Répondu el 17 de Septembre, 2013 par Andreas (343 Points )

Answer 5

7voto

Paolo Moretti Points 9519

Il existe également un portage non officiel du plugin Typeahead de Bootstrap 2 :

Bootstrap 3 Typeahead

Il ne nécessite pas de CSS supplémentaire et fonctionne avec la dernière version de Bootstrap.

Voici un Démonstration sur Plunker.

Répondu el 21 de Janvier, 2014 par Paolo Moretti (9519 Points )

Answer 6

4voto

optimister Points 101

Non seulement .tt-hint est cassé, mais d'autres classes css aussi.

La meilleure solution, qui fonctionne dans tous les navigateurs, est d'ajouter le css supplémentaire, qui répare les problèmes de css entre Typeahead.js et Bootstrap 3 :

https://github.com/jharding/typeahead.js-bootstrap.css

Répondu el 9 de Octobre, 2013 par optimister (101 Points )

Problème de CSS sur Twitter Typeahead avec Bootstrap 3

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Problème de CSS sur Twitter Typeahead avec Bootstrap 3

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: