estendere la larghezza del typeahead bootstrap in modo che corrisponda al campo di input

Question

So che questa domanda è stata posta almeno tre volte prima ma la risposta che ho visto non era quella che stavo cercando. Sto cercando di aumentare la larghezza del campo di completamento automatico che twitter bootstrap genera con la sua funzione typeahead. Ho letto che si estende per coprire tutto il testo con il campo. vale a dire che più lungo è il testo, più ampio è il campo di completamento automatico. Comunque mi piacerebbe che fosse una spanna6 perché è così ampio il mio campo di ricerca. Qualche idea? Ho visto alcune risposte jquery ma non sono riuscito a seguirle.

Answer 1

Michael Watson ha dato quello che penso sia la risposta più semplice nel suo commento.

.twitter-typeahead { width: 100%; } 

Update # 1: Sulla base dei commenti qui sotto (grazie Steve, Vishi), fare lo stesso per .tt-hint, .tt-input, .tt-dropdown-menu.

Aggiornamento # 2: rapporti mlissner che .tt-dropdown-menu è ora .tt-menu, in modo che il risultato finale è

.twitter-typeahead, .tt-hint, .tt-input, .tt-menu { width: 100%; } 

Answer 2

Il menu a discesa è un ul con le classi typeaheaddropdown-menu si potrebbe usare i CSS per impostare la sua larghezza:

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

La larghezza del span6 non è statico, quindi avrete bisogno di alcuni media query per renderlo reattivo.

Per Bootstrap 3 la funzione typeahead viene rimossa da TB3 invece utilizzare https://github.com/twitter/typeahead.js/. Avrai bisogno di un po 'di additional CSS per integrarlo con il Bootstrap di Twitter. Avrai bisogno di caricare alcuni CSS aggiuntivi per ottenere il menu a discesa typeahead.js per adattarlo al tema di Bootstrap predefinito. Prova extended Bootstrap's LESS o se stai cercando una versione più estesa prova: typeahead.js-bootstrap3.less.

Il menu a discesa con è ora impostato con la classe del menu .tt-dropdown. Invece di cambiare il CSS potresti anche provare a impostare la larghezza dinamica. Con typeahead una classe del vostro tag input typeahead:

$('.typeahead').typeahead({}) 
on('typeahead:opened',function(){$('.tt-dropdown-menu').css('width',$('.typeahead').width() + 'px');}); 

Answer 3

per rendere la discesa corrisponde alla larghezza del campo che ci si vuole qualcosa di simile:

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

Piccolo miglioramento su quanto sopra utilizzando event.target e un listener di documenti globale.

Answer 4

sto usando 3.2.0 Bootstrap con typeahead.js-bootstrap3.less e annidato l'ingresso in div come questo:

<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> 

Ho anche bisogno di aggiungere questo al mio css:

.tt-input-group { 
    width: 100%; 
} 

Answer 5

Questo è per versioni più recenti:

.twitter-typeahead, .tt-menu 
{ 
    display: block !important; 
}