extension de la largeur de Bootstrap typeahead pour correspondre au champ de saisie
Je sais que cette question a été posée au moins trois fois auparavant, mais la réponse que j'ai vue n'était pas ce que je cherchais. Je cherche à augmenter la largeur du champ de saisie semi-automatique généré par twitter bootstrap avec sa fonction typeahead. J'ai lu qu'il s'étend pour couvrir l'ensemble du texte dans le champ. c'est-à-dire que plus le texte, plus le champ de saisie semi-automatique. Cependant, je voudrais que ce soit un span6 parce que c'est la largeur de mon champ de recherche. Des idées? Je j'ai vu quelques réponses jquery mais je ne pouvais pas les suivre.
5 réponses
Michael Watson a donné ce que je pense être la réponse la plus simple dans son commentaire.
.twitter-typeahead { width: 100%; }
Update # 1: basé sur les commentaires ci-dessous (merci Steve, Vishi), faites de même pour .tt-hint, .tt-input, .tt-dropdown-menu.
Mise à jour # 2: mlissner signale que .tt-dropdown-menu est maintenant .tt-menu, donc le résultat final est
.twitter-typeahead, .tt-hint, .tt-input, .tt-menu { width: 100%; }
Le menu déroulant est un ul avec les classes typeahead dropdown-menu vous pouvez utiliser CSS pour définir sa largeur:
.dropdown-menu
{
width: .... px;
}
La largeur du span6 n'est pas statique, vous aurez donc besoin de requêtes multimédia pour le rendre réactif.
Pour Bootstrap 3 la fonction typeahead est Supprimer de TB3 à la place utiliser https://github.com/twitter/typeahead.js/. Vous aurez besoin de CSS supplémentaires pour l'intégrer au Bootstrap de Twitter. vous aurez besoin de charger quelques CSS afin d'obtenir le menu déroulant typeahead.js pour s'adapter au thème de Bootstrap par défaut. Essayez extended BOOTSTRAP's LESS ou si vous cherchez une version plus étendue, essayez: typeahead.js-bootstrap3.moins .
La liste déroulante avec est définie avec la classe. TT-dropdown-menu maintenant. Au lieu de changer le CSS, vous pouvez également essayer de définir la dynamique de largeur. Avec typeahead une classe de votre balise d'entrée typeahead:
$('.typeahead').typeahead({})
on('typeahead:opened',function(){$('.tt-dropdown-menu').css('width',$('.typeahead').width() + 'px');});
Pour que la liste déroulante corresponde à la largeur du champ, vous voudriez quelque chose comme ceci:
$(document).on('typeahead:opened', function(event, datum) {
var width = $(event.target).width();
$('.tt-dropdown-menu').width(width);
});
Petite amélioration sur l'événement d'utilisation ci-dessus.cible et un écouteur de document global.
J'utilise Bootstrap 3.2.0 avec typeahead.js-bootstrap3.moins et imbriqué l'entrée dans divs comme ceci:
<div class="form-group">
<label>my label</label>
<div class="col-md-4">
<div class="input-group tt-input-group">
<input id="mytypeahead" class="form-control" />
</div>
</div>
</div>
J'avais aussi besoin d'ajouter ceci à mon css:
.tt-input-group {
width: 100%;
}
Ceci est pour les nouvelles versions:
.twitter-typeahead, .tt-menu
{
display: block !important;
}