2

私はsilviomoreto bootstrap-selectを使用しています。ドキュメントへのリンクは次のとおりですhttp://silviomoreto.github.io/bootstrap-select/いくつかの選択オプションでは、複数選択を使用していますが、次の問題があります。

それ以上のオプションが選択されている場合、それらは選択入力に収まりません。このように (スクリーンショットの例)。入力ボックスが高さを拡大し、ユーザーが選択したすべてのものを表示する新しい選択オプションごとに方法はありますか? また、cssを変更しようとしました

.bootstrap-select.btn-group .btn .filter-option {
   display: inline-block;
   width: 100%;
   float: left;
   text-align: left;
   color: #333 !important;
   text-transform: uppercase;
   overflow: visible;
   height: 150px;
}

しかし、それもうまくいきませんでした。

前もって感謝します！

4

3 に答える 3

1

次の行を .btn の css に追加する必要があります。white-space: normal;

.bootstrap-select .btn {
    white-space: normal;
}

次に、正しい初期幅、パディングなどを設定する必要があります。これがうまくいくことを願っています。

于 2014-07-31T21:08:21.530 に答える
1

このページの解決策はどれもうまくいきませんでした。私はそれを処理するためにいくつかのjQueryコードを書くことになりました。他の誰かを助ける場合に備えて、ここにあります！

$(document).ready(function(){
  $('#my_select').on('loaded.bs.select hidden.bs.select', function(){ 
    $(this).parent('.bootstrap-select').css('height','auto');
    $(this).next('.btn').css('overflow','hidden').height($(this).next('.btn').find('.filter-option-inner').height()); 
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.5/css/bootstrap-select.min.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.5/js/bootstrap-select.js"></script>

<select id="my_select" class="form-control selectpicker" multiple data-multiple-separator="<br>">
  <option>Value 1</option>
  <option>Value 2</option>
  <option>Value 3</option>
  <option>Value 4</option>
  <option>Value 5</option>
</select>

結果は次のとおりです。

複数の選択されたオプションが表示されました

于 2019-11-06T14:29:57.457 に答える
0

選択の代わりに複数選択を使用したいと思います。

   <select class="selectpicker" multiple title='Choose one of the following...'>
         <option>Mustard</option>
          <option>Ketchup</option>
          <option>Relish</option>
      </select>

また、選択に合わせて選択ボックスの幅を大きくしたい場合は、div.bootstrap-select クラスに応じて動的な幅を設定できます。

于 2014-07-31T18:35:21.437 に答える