CODEWITHSUNDEEP
twitter-bootstrap-3twitter-typeahead
Miguel
Miguel

Reputation: 1714

why is typeahead.js tt-dropdown-menu not showing (bootstrap 3)?

This is my html.

<div class="container">
<div class="row">
    <div class="col-md-12">
        <div class="form-inline">
            <span>Looking for</span>
            <div class="form-group">
                <input type="text" class="form-control typeahead" placeholder="Name or PersonID" autocomplete="off">
            </div>
            <button id="btn-go" class="btn btn-primary">Go</button>
        </div>
    </div>
</div>

And this is my javascript:

var people = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: 'contact/search/?id=%QUERY'
});

people.initialize();

$('.typeahead').typeahead(null, {
    name: 'people',
    displayKey: 'value',
    source: people.ttAdapter(),
    templates: {
        suggestion: Handlebars.compile('<p><strong>{{fullname}}</strong> - {{personid}}</p>')
    }
}).on('typeahead:selected', function(obj, datum) {
    console.log(obj);
    console.log(datum);
});

Everything works fine, results are coming back from the server and the dropdown menu gets populated but is not visible. Seems to be a CSS problem but that is where I need help. Why is that menu hidden? I have checked the basics like "display" or "z-index" for the relevant tags but does not help. Any Ideas?

BTW I'm using bootstrap 3 typeahed css that I found here

EDIT:

Found the problem, please see my answer below.

Upvotes: 5

Views: 7655

Answers (1)

Miguel
Miguel

Reputation: 1714

Found out that there is no problem with bootstrap and/or typeahead. The problem for me is that the div.container is inside another div that has the overflow set to hidden. So when the row in question was the only element on the page the drop down was hidden because of the overflow setting. Removed that and everything works just as expected.

Upvotes: 6

Related Questions