8

David Stutz の Bootstrap-Mutliselectを使用しています。次のコードを使用して、ページ内のすべての選択要素に接続しました。

$(function () {
    $("select").multiselect(
        { enableFiltering: true },
        { maxHeight: 5 },
        { multiple: false }
    );

    $("[multiple]").multiselect(
        { enableFiltering: true },
        { maxHeight: 5 },
        { enableCaseInsensitiveFiltering: true }
    );
});

上記のコードは完全に機能します。問題は、新しい行に折り返されるのではなく、次のスクリーンショットのように、長いテキスト値を持つオプションがコンテナーの境界を超えてしまうことです。

スクリーンショット

どうすればこれを修正できますか? 上記の.jsコードを変更するだけでそれを行う方法があれば、それはボーナスになります。

4

2 に答える 2

23

デフォルトでは、 に幅を適用するものは何もない.multiselect-containerため、すべての項目を 1 行に表示するために必要なだけのスペースを占有します。

デフォルトのスクリーンショット

ただし、何かが に幅を適用している場合は、.multiselect-container特定した問題が発生します。

幅のスクリーンショット

問題は、ブートストラップの複数選択が、ブートストラップ ライブラリが次のコードを適用するドロップダウン メニューを使用することです。

.dropdown-menu>li>a { white-space: nowrap; }

これを修正するために、次の css を使用して空白を通常のラッピング モードに戻すことができます。

.multiselect-container > li > a { white-space: normal; }

jsFiddle でのデモ

スクリーンショットを修正

さらにいくつかのメモ：

  1. maxHeightはピクセル数を5受け取るため、これを渡すと、コントロールの高さが 5px だけになります。次のようなものを渡す必要がありますmaxHeight: 200
  2. enableCaseInsensitiveFilteringと同じことenableFilteringを行うので、両方は必要ありません。大文字と小文字を区別するかどうかを決定し、どちらかを true に設定します

さらなる説明で更新

@ user2105811、ラベルを具体的にターゲットにする必要はなく!important、このソリューション用に生成された HTML 構造と CSSを使用する必要はありません。

応答のスクリーンショット

  • white-spaceは常に親から継承されるため、ターゲティングはターゲティングlabelと同じことを行いますがa、根本的な問題に対処します。
  • 元のブートストラップ コードには、それを修正するために使用されているセレクターと同程度の特異性があります。つまり、カスタム CSS がブートストラップ CSS の後に配置されている限り、オーバーライドされます。これは常に当てはまるはずです。うまくいかない場合は、あなたがこれをしていないのではないかと思います。
于 2014-08-12T21:47:02.430 に答える
-1

使用するあなたの提案:

.multiselect-container > li > a { 
     white-space: normal;
}

動作しません。代わりに、CSS に label タグを追加し、!important に設定しました。今では動作します。

.multiselect-container > li > a > label{
    white-space: normal !important;
}
于 2014-09-23T12:40:28.053 に答える