webentwicklung-frage-antwort-db.com.de

erweitern der Breite des Bootstrap-Typheads, um das Eingabefeld anzupassen

Ich weiß, dass diese Frage bereits dreimal gestellt wurde, aber die Antwort, die ich sah, war nicht das, wonach ich gesucht hatte. Ich möchte die Breite des Autocomplete-Felds vergrößern, das Twitter-Bootstrap mit seiner Typeahead-Funktion generiert. Ich habe gelesen, dass es sich erstreckt, um den gesamten Text im Feld abzudecken. Das heißt, je länger der Text ist, desto breiter ist das Feld für die automatische Vervollständigung. Ich möchte jedoch, dass es sich um ein span6 handelt, denn so groß ist mein Suchfeld. Irgendwelche Ideen? Ich habe einige Jquery-Antworten gesehen, aber ich konnte ihnen nicht folgen.

26
NSaid

Michael Watson hat meiner Meinung nach die einfachste Antwort in seinem Kommentar gegeben.

.Twitter-typeahead { width: 100%; } 

Update # 1: Aufgrund der folgenden Kommentare (danke Steve, Vishi), mache dasselbe für .tt-hint, .tt-input, .tt-dropdown-menu.

Update # 2: mlissner meldet, dass .tt-dropdown-menu jetzt .tt-menu ist, das Endergebnis ist also

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

Das Dropdown-Menü ist ein ul mit den Klassen typeaheaddropdown-menu Sie können CSS verwenden, um seine Breite festzulegen:

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

Die Breite von span6 ist nicht statisch, daher benötigen Sie einige Medienabfragen, um eine Antwort darauf zu erhalten.

Für Bootstrap 3 wird die typeahead-Funktion von TB3 entfernt. Verwenden Sie stattdessen https://github.com/Twitter/typeahead.js/Sie benötigen etwas zusätzliches CSS , um es mit Twitter Bootstrap zu integrieren.Sie müssen einige zusätzliche CSS laden, damit das Dropdown-Menü typeahead.js zum Standard-Bootstrap-Design passt. Versuchen Sie extended Bootstrap's LESS oder wenn Sie eine erweiterte Version suchen, versuchen Sie: typeahead.js-bootstrap3.less .

Das Dropdown mit wird jetzt mit der .tt-Dropdown-Menüklasse festgelegt. Anstatt das CSS zu ändern, können Sie auch versuchen, die Breite dynamisch einzustellen. Mit typeahead eine Klasse Ihres typeahead-Eingabe-Tags:

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

Damit die Dropdown-Liste mit der Feldbreite übereinstimmt, möchten Sie etwa Folgendes:

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

Kleine Verbesserung gegenüber dem Vorstehenden mit event.target und einem globalen Dokumentenlistener.

4
Binary Logic

Ich verwende Bootstrap 3.2.0 mit typeahead.js-bootstrap3.less und verschachtelte die Eingabe in divs wie folgt:

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

Ich musste dies auch zu meiner CSS hinzufügen:

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

Dies ist für neuere Versionen:

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

Hier ist eine reine CSS-Lösung:

Da .dropdown-menu absolut positioniert ist, wird dies durch Hinzufügen von position: relative; zum div-Umbruch um Ihr uib-typeahead-Eingabefeld und durch Setzen von width: 100%; in Ihrem .dropdown-menu behoben.

Ihr CSS würde ungefähr so ​​aussehen:

.typeahead-search {
    position: relative;
}

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