1

Bootstrap-tokenfield の Web サイトhttp://sliptree.github.io/bootstrap-tokenfield/

ここに私のテストコードがあります:

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

入れようとしましjsfiddleたが、動作が歪んでしまいます。ここで見ることができます：http://jsfiddle.net/kongakong/aadt6xww/7/

初回ロード時はこんな感じ

ここに画像の説明を入力

ただし、テキスト入力に触れると、テキスト入力が拡大し、画面の全幅を占めます (おそらくそれ以上)。ドロップダウンの一部が画面から押し出され、結果として選択肢が見えなくなります。

ここに画像の説明を入力

コードの何が問題になっていますか?

4

0 に答える 0