it-swarm.com.de

Typenkopfprobleme mit Bootstrap 3.0 RC1

Ich versuche, Twitter Typeahead mit Bootstrap 3 RC1 zu verwenden, da Bootstrap sein eigenes Typeahead-Plugin auf Version 3 gelöscht hat.

Ich verwende den folgenden HTML-Code in meinem Formular:

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

Ohne das Hinzufügen von Typeahead wird das Sucheingabefeld folgendermaßen angezeigt:

before adding Typeahead

Dann habe ich Typeahead folgendermaßen hinzugefügt:

<script>
    $('#query').typeahead({        
        local: ['alpha', 'bravo','charlie','delta','epsilon','gamma','zulu']
    });
</script>

Und das Feld wurde kleiner mit einem weißen Rechteck darin.

after adding Typeahead

when typing some text...

Mache ich etwas falsch oder ist es nur ein Fehler in Typeahead oder Bootstrap 3 RC1?

24
javsmo

Update 14. Februar 2014

Wie von laurent-wartel try https://github.com/hyspace/typeahead.js-bootstrap3.less oder https://github.com/bassjobsen/typeahead.js-bootstrap erwähnt -css für zusätzliches CSS zur Verwendung von typeahead.js mit Bootstrap 3.1.0.

Oder verwenden Sie das "alte" (TB 2) -Plugin mit der neuen Bloodhound-Vorschlags-Engine: https://github.com/bassjobsen/Bootstrap-3-Typeahead/issues/26


Twitters Typeahead scheint nicht bereit für Twitter Bootstrap 3 zu sein. Um Twitter's Typeahead mit Twitter Bootstrap zu verwenden, benötigen Sie etwas zusätzliches CSS (veraltet, nicht mehr gepflegt) . Die Verwendung dieses CSS wird nicht korrigiert deine Probleme.

In Ihrem Beispiel erhält das Eingabefeld keine Breite von 100%. Dies wird durch Javascript verursacht. Das Javascript umschließt die Eingabe in einer Spanne:

<span class="Twitter-typeahead" 
    style="position: relative; display: inline-block; direction: ltr;">

Diese Spanne hat keine 100%, also geben Sie die Eingabe ein. So beheben Sie das Hinzufügen zu Ihrem CSS:

.Twitter-typeahead {
  width: 100%;
}

Das Javascript setzt die Hintergrundfarbe Ihrer Eingabe auf transparent. Wenn Sie die Plugin-Quelle nicht ändern möchten, benötige ich zusätzliches Javascript, um dies zu beheben:

$('.tt-query').css('background-color','#fff');

Jetzt sollte wie erwartet funktionieren, basierend auf Ihrem Beispiel. http://www.bootply.com/73439

update

Die ursprüngliche Frage war für RC1 für Twitter Bootstrap 3.0.0. Sie müssen auch hinzufügen:

.tt-dropdown-menu {
   width:100%;        
}

Neuer Bootply: http://bootply.com/86305

39
Bass Jobsen

Schauen Sie sich die Datei typeahead.js-bootstrap3.less an.

Es funktioniert hervorragend mit der neuesten Version von Bootstrap (v3.0.3) und ermöglicht es Ihnen, Ihre benutzerdefinierten Themen zu behalten. Es gibt auch eine .css-Datei mit Standard-Bootstrap-Themen.

2
Laurent W.

Typeahead.js CSS-Fixierung hat auch Probleme mit Eingabegruppen (Eckenrundung), ich habe irgendwo Informationen gefunden, dass es auf Modalen bricht, usw .. _. Zusätzlich https://github.com/jharding/typeahead.js-bootstrap. css ist nicht mehr vorhanden, also versuche ich es mit der Lösung von Bass Jobsen;)

1
3176243

Nach langem Nachforschen ohne das Hinzufügen von Stilen hatte ich es endlich geschafft, eine neue Zeile im Konstruktor Typeahead hinzuzufügen (bootstrap.js oder bootstrap-typeahead.js, abhängig von Ihrer Version):

this. $ menu.width (this. $ element.outerWidth ());

Hier ist der 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());
}
0
lukiller