Bug when using Select2 in a Bootstrap form-group

Navigation
3

I'm having trouble fixing a bug that happens when I use Select2 in a input-group . The problem is that by selecting a option with a very long name, input-group does not respect the width of the parent element. 

<div class='elemento_pai' style='width:200px;'>
<div class="input-group">
    <select class="select2">
        <option></option>
        <option>Nome extenso Nome extenso Nome extenso Nome extenso Nome extenso</option>
    </select>
    <span class="input-group-btn">
        <button class="btn btn-sm btn-default" type="submit">
        <span class="fa fa-user"></span>
    </button>
    </span>
</div>
</div>

Whathappensisthatinput-groupendsupwithwidthgreaterthan200px,notrespectingelemento_pai.Anyonewhohasevergonethroughthatfoundasolution?

Example of the JSFiddle problem

Unresolved Issues:

asked by anonymous 14.11.2014 / 19:25

2 answers

4

One solution: 

.select2-container .select2-choice > .select2-chosen{
  white-space: normal;
}

JSFiddle Example

    
14.11.2014 / 20:40
0

I do not know if it is the best answer but from what I found to solve your case, you should put the first <option> with the small text

Example: 

<div class="container">
  <form class="form-inline">
    <div class="input-group">
      <span class="input-group-addon">@</span>

      <select id="lunch" class="selectpicker form-control" data-live-search="true" title="Please select a lunch ...">
        <option value="1">Nome extenso Nome extenso Nome extenso Nome extenso Nome extenso Nome extenso Nome extensoNome extenso Nome extenso</option>
        <option selected>Select 1</option>
        <option>Select 2</option>
        <option>Select 2</option>
        <option>Select 2</option>
        <option>A really really long option made to illustrate an issue with the live search in an inline form</option>
      </select>
    </div>
  </form>
  <div>

I found the answer here .

    
14.11.2014 / 20:43
How to hide the tooltip created by the Title attribute? Vestibular system using JAVA