Website of Bootstrap-tokenfield http://sliptree.github.io/bootstrap-tokenfield/
Here is my test code:
<html>
<head>
<script type="text/javascript"
src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<LINK
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.css"
rel="stylesheet" type="text/css">
<LINK
href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"
rel="stylesheet" type="text/css">
<LINK
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/tokenfield-typeahead.css"
rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
function make_tokenfield() {
$('#tokenfield').tokenfield({
autocomplete: {
source: ['red','blue','green','yellow','violet','brown','purple','black','white'],
delay: 100
},
showAutocompleteOnFocus: true
})
};
$(document).ready(make_tokenfield);
</script>
<style>
container {
border: 1px;
margin:10 auto;
}
</style>
</head>
<body>
<div class="container">
<div class="form-group">
<input type="text" class="form-control" id="tokenfield" value="blue"
width="80%"/>
</div>
</div>
</body>
</html>
I have tried to put it in jsfiddle but it distorts the behaviour. You can see it here: http://jsfiddle.net/kongakong/aadt6xww/7/
When it is first loaded, it looks like this
However once I touch the text input, the text input expands and occupy the full width of the screen (Maybe more). Part of the dropdown is pushed off the screen and the choices are invisible as a result.
What is wrong with the code?