Search code examples
jqueryhtmlcssjquery-select2jquery-select2-4

show select2 multiple selection outside searchbox


Is there any way to show select2 selected items outside search box?
what i have now:
Here is a sample fiddle:
enter image description here
But what i want:
enter image description here

.select2-search-choice{
   width:100%
}
<select multiple id="e1" style="width:300px">
    <option value="AL">Alabama</option>
    <option value="Am">Amalapuram</option>
    <option value="An">Anakapalli</option>
    <option value="Ak">Akkayapalem</option>
    <option value="WY">Wyoming</option>
</select>

Solution

  • Right now you have it set to overflow: hidden;. Take that off by inherit and then set how far from the top you want your answers to go.

    http://jsfiddle.net/q2hp451y/3/

    .select2-search-choice{
      width:100%
    }
    
    .select2-container-multi .select2-choices {
        overflow: inherit;
    }
    
    .select2-container-multi .select2-choices .select2-search-choice {
         top: 30px;
         width: 270px;
    }