如何使用多个引导选择显示所有选定的选项？

Question

I am using silviomoreto bootstrap-select. Here is the link with documentation http://silviomoreto.github.io/bootstrap-select/ On few select options I am using multiple select and i have next problem.

If there is more options selected, they don't fit into select input. Like this ( screenshot example ) . Is there any way that with every new selected option that input box expands the height and display everything that user selected? Also i tried to change 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;
}

but that didn't work neither.

Thanks in advance!

Answer 1

You must add this line to css of .btn: white-space: normal;

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

Then you must set the correct initial width, padding and stuff. Hope this works.

Answer 2

None of the solutions on this page worked for me. I ended up writing some jQuery code to take care of it. Here is it, in case it helps anyone else!

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

With the result being:

Multiple Selected Options Shown

Answer 3

I think you want to use the multi select instead of the select.

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

And if you want the width of your select box to grow with the selections, you could set a dynamic width accordingly to the div.bootstrap-select class.