5

Select2 を使用してタグ付けボックスを作成します。次の html コードを追加しました。

<select id="tags" multiple="">
    <option value="tag_1">Tag1</option>
    <option value="tag_2">Tag2</option>
    <option value="tag_3">Tag3</option>
</select>

そして、私はこのJSを使用しました：

$(document).ready(function() {
    $("#tags").select2({
        placeholder: "Select tag",
        allowClear: true,
        minimumInputLength: 2,
        maximumSelectionSize: 1,
    });
});

問題は次のとおりです。テキスト ボックスは、最初の読み込み時に通常の幅になります。タグを挿入すると、適切に表示されます。しかし、バックスペースをクリックするか、タグの x をクリックして削除すると、テキスト ボックスの幅が約 5px に縮小されます。私は何を間違っていますか？Twitterのブートストラップも使用していますが、依存関係はありますか?

4

4 に答える 4

4

これは簡単な修正です。コードを次のように変更するだけです。

$(document).ready(function() {
    $("#tags").select2({
        placeholder: "Select tag",
        allowClear: true,
        minimumInputLength: 2,
        maximumSelectionSize: 1,
        width: '100%',
    });
});

次の属性を追加して、カスタム CSS を設定することもできます。

containerCssClass: 'mySpecialClass'

そして、幅を処理するためにいくつかのカスタム CSS を割り当てます。

.mySpecialClass {
    width: 100%;
}

それらのいずれかが機能します！

于 2014-07-16T22:06:53.103 に答える