web-dev-qa-db-fra.com

extension de la largeur de la typeahead bootstrap 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 celle 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 que cela s'étend pour couvrir tout le texte sur le terrain. c'est-à-dire que plus le texte est long, plus le champ de saisie semi-automatique est large. Cependant, j'aimerais que ce soit un span6, car c'est la largeur de mon champ de recherche. Des idées? J'ai vu des réponses, mais je ne pouvais pas les suivre.

jquerycsstwitter-bootstraptypeahead
26
NSaid

Michael Watson a donné ce que je pense être la réponse la plus simple dans son commentaire.

.Twitter-typeahead { width: 100%; }

Mise à jour n ° 1: Sur la base des commentaires ci-dessous (merci Steve, Vishi), faites de même pour .tt-hint, .tt-input, .tt-dropdown-menu.

Mise à jour n ° 2: mlissner indique que .tt-dropdown-menu est maintenant .tt-menu, le résultat final est donc

.Twitter-typeahead, .tt-hint, .tt-input, .tt-menu { width: 100%; }
61
Willie Wheeler

Le menu déroulant est un ul avec les classes typeaheaddropdown-menu vous pouvez utiliser CSS pour définir sa largeur:

.dropdown-menu
{
 width: .... px;
}

La largeur de span6 n'est pas statique, vous aurez donc besoin de requêtes de support pour le rendre réactif.

Pour Bootstrap 3, la fonction typeahead est supprimée de TB3, utilisez plutôt https://github.com/Twitter/typeahead.js/ . Vous aurez besoin de CSS supplémentaire pour l’intégrer au Bootstrap de Twitter.Vous devrez charger des CSS supplémentaires pour que le menu déroulant typeahead.js s'adapte au thème par défaut de Bootstrap. Essayez extended Bootstrap's LESS ou si vous cherchez une version plus étendue, essayez: typeahead.js-bootstrap3.less .

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 largeur dynamique. 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');});
8
Bass Jobsen

Pour que le menu déroulant corresponde à la largeur du champ, vous souhaiterez quelque chose comme ceci:

$(document).on('typeahead:opened', function(event, datum) {
  var width = $(event.target).width();
  $('.tt-dropdown-menu').width(width);
});

Petite amélioration par rapport à ce qui précède avec event.target et un auditeur global de documents.

4
Binary Logic

J'utilise Bootstrap 3.2.0 avec typeahead.js-bootstrap3.less et imbriqué l'entrée dans les 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%;
}
2
digitalrizzle

C'est pour les nouvelles versions:

.Twitter-typeahead, .tt-menu 
{
  display: block !important;
}
0
candlejack

Voici une solution CSS pure:

Puisque .dropdown-menu est positionné en absolu, ajouter position: relative; à la division entourant votre champ de saisie uib-typeahead et régler width: 100%; sur votre .dropdown-menu résoudra le problème.

Votre CSS ressemblerait à quelque chose comme ça:

.typeahead-search {
    position: relative;
}

.dropdown-menu {
    width: 100%;
}
0
Joe McLean