Problèmes de type tête avec Bootstrap 3.0 RC1
je suis en train d'utiliser Twitter Typeahead avec Bootstrap 3 RC1, parce que Bootstrap a abandonné son propre typeahead plugin pour la version 3.
j'utilise le HTML suivant sur mon formulaire:
<div class="well">
<form>
<fieldset>
<div class="form-group">
<label for="query">Search:</label>
<input type="text" class="form-control" name="query" id="query" placeholder="Start typing something to search...">
</div>
<button type="submit" class="btn btn-primary">Search</button>
</fieldset>
</form>
</div>
sans ajouter de titre, le champ d'entrée de la recherche affiche comme ceci:
puis J'ai ajouté Typeahead comme ceci:
<script>
$('#query').typeahead({
local: ['alpha', 'bravo','charlie','delta','epsilon','gamma','zulu']
});
</script>
et le champ est devenu plus petit, avec un rectangle blanc à l'intérieur.
est-ce que je fais quelque chose de mal ou c'est juste un bug sur Typeahead ou Bootstrap 3 RC1?
5 réponses
mise à jour du 14 février 2014
comme mentionné par laurent-wartel try https://github.com/hyspace/typeahead.js-bootstrap3.less ou https://github.com/bassjobsen/typeahead.js-bootstrap-css 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
la machine à écrire de Twitter ne semble pas prête pour le Bootstrap 3 de Twitter. Pour utiliser la tête de typographie de Twitter avec Bootstrap de Twitter vous aurez besoin de quelques CSS supplémentaires (déprécié, n'est plus maintenu). Utiliser ce CSS ne règle pas vos problèmes.
dans votre exemple, le champ input n'a pas une largeur de 100%. Ce sera la cause par le Javascript. Le javascript enveloppe l'entrée dans une portée:
<span class="twitter-typeahead"
style="position: relative; display: inline-block; direction: ltr;">
cette portée n'a pas de 100%, donc il faut entrer dedans. Ajouter à votre CSS:
.twitter-typeahead {
width: 100%;
}
le Javascript définit la couleur de fond de votre entrée à transparent. Si vous ne voulez pas changer la source du plugin, je vais avoir besoin de Javascript supplémentaire pour corriger cela:
$('.tt-query').css('background-color','#fff');
est Maintenant devrait fonctionner comme prévu sur la base de votre exemple. http://www.bootply.com/73439
mise à jour
la question originale était pour RC1 pour Bootstrap 3.0.0 de Twitter. vous devez aussi ajouter:
.tt-dropdown-menu {
width:100%;
}
nouveau bootply: http://bootply.com/86305
regarder typeahead.js-bootstrap3.moins .
Il fonctionne très bien avec la dernière version de Bootstrap (v3.0.3) et permet de garder votre personnalisé de la thématisation. Il y a aussi une .fichier css avec bootstrap theming par défaut.
Typeahead.JS CSS fixing ont également des problèmes avec les groupes d'entrée (arrondis coins), j'ai trouvé quelque part des informations qu'il casse sur les modaux, etc Additionaly https://github.com/jharding/typeahead.js-bootstrap.css n'est plus maintenue, donc je vais essayer pour la Basse Jobsen solution ;)
après beaucoup de recherches sans aucune chance d'ajouter des styles, Je l'ai finalement corrigé en ajoutant une ligne à l'intérieur du constructeur Typeahead (bootstrap.js ou bootstrap-typeahead.js selon votre version):
this.$ menu.largeur(ce.$élément.outerWidth ());
voici le code:
/* TYPEAHEAD PUBLIC CLASS DEFINITION
* ================================= */
var Typeahead = function (element, options) {
this.$element = $(element)
this.options = $.extend({}, $.fn.typeahead.defaults, options)
this.matcher = this.options.matcher || this.matcher
this.sorter = this.options.sorter || this.sorter
this.highlighter = this.options.highlighter || this.highlighter
this.updater = this.options.updater || this.updater
this.source = this.options.source
this.$menu = $(this.options.menu)
this.shown = false
this.listen()
this.$menu.width(this.$element.outerWidth());
}
au lieu de Twitter Typeahead, essayer d'utiliser bootstrap-sélectionner . Cette bibliothèque est intégrée dans le Bootstrap 3 et a une fonctionnalité plus large.