Bug when using Select2 in a Bootstrap form-group

Asked

Viewed 1,462 times

3

I’m having a hard time fixing a bug that happens when using Select2 in a input-group. The problem is that when selecting a option with a very long name, the 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>

inserir a descrição da imagem aqui

What happens is that the input-group ends up with a width greater than 200px, not respecting the elemento_pai. Someone who’s been through it has found a solution?

Example of the problem in Jsfiddle

Unsolved issues:

twitter-bootstrap jquery-select2

  • I think the parent element is missing from your Fiddle example.

  • @Renatodin Icon in the Jsfiddle example does not need the element_pai, just decrease the size of your browser window and you will notice that select will not respect the width. That one elemento_pai was just to illustrate.

2 answers

4


A solution:

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

Jsfiddle example

0

I don’t know if it’s 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.

  • Antony, the question is related to the use of Select2 with input-group, that your answer does not solve my problem, but thank you for the intention.

Browser other questions tagged twitter-bootstrap jquery-select2

You are not signed in. Login or sign up in order to post.