テキストエリアで動作するブートストラップトークンフィールドを定義する方法

Question

tokenfieldを、より高いテキストエリアに定義しようとしましたが、テキストボックス（1行）として表示しました。テキストエリアで動作するようにトークンフィールドをカスタマイズするにはどうすればよいですか？

<textarea name="f1_email" placeholder="Enter Friends's Email separated by comma" class="f1-facebook form-control" rows="10" cols="30" id="f1-referral-email"></textarea> 

$('#f1-referral-email').on('tokenfield:createdtoken', function (e) { 
    var valid = isEmail(e.attrs.value); 
    if (!valid) { 
     $(e.relatedTarget).addClass('invalid') 
    } 
}).tokenfield() 

---

実際の出力：

すべてのヘルプやアドバイスが高く評価され、事前にありがとうございます。

Answer 1

hereのように、トークンフィールドはCSS (bootstrap-tokenfield.css)で調整できます。調べて(input-sm, input-lg etc)を探してください。これはちょうどcustom textareaを作成するためのハックです。その後、inputタグで適切なクラスを選択します。それとも、カスタムサイズを作成したい場合は、以下のコードを参照：

HTML：

<div class="form-group form-group-xl"> 
    <input type="text" class="form-control" id="my-tokenfield"> 
</div> 

をCSS：

.form-group.form-group-xl .form-control { 
    height: 50px; 
    line-height: 50px; 
} 
.form-group.form-group-xl .tokenfield { 
    height: auto; 
    min-height: 50px; 
}