I am trying to use bootstrap tagsinput in a form contained in a modal like this
...
<div class="form-group">
<label for="myTagLabel">Tags:</label>
<input class="form-control" id="myTag" type="text" data-role="tagsinput">
</div>
Also I am trying to use twitter typeahead with the following code
var tagValues = ['ATag','AnotherTag'];
var tagVals = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: $.map(tagValues, function(tagValue) { return { value: tagValue }; })
});
// kicks off the loading/processing of `local` and `prefetch`
tagVals.initialize();
$('#myTag').tagsinput({
typeaheadjs: {
name: 'tagVals',
displayKey: 'value',
valueKey: 'value',
source: tagVals.ttAdapter()
}
});
you can see in the image above what is the result. In this case the problem is that typeahead suggestions are not contained in the frame with rounded corners