Select2 и Bootstrap 3 CSS Issue

Question

Я использую плагин Select2 в моем проекте на основе Bootstrap 3. Я не могу найти способ исправить одну проблему. Когда я использую select2 как часть .input-group, а выбранное значение длинное - это брокерская структура. (Я сделал некоторый css, чтобы соответствовать select2 в стиле Bootstrap, но это не влияет на стиль display:, поэтому я его не прикрепляю).

JS fiddle

Когда я использую .input-group тех это изменение дочерних элементов в display: table-cell, но я не могу заставить элементы, чтобы соответствовать родительскому контейнеру. Я не могу изменить max-width: из .input-group, потому что он не работает. Я попытался изменить table-layout, но, похоже, он не работает с элементами, отличными от <table>.

Любые идеи, как я могу это исправить? PS. Я не могу добавить какой-либо дополнительный класс CSS к любому из этих элементов.

Answer 1

Вы должны попробовать опцию dropdownAutoWith.

$('select').select2({ 
    dropdownAutoWidth: true 
}); 

Вот fork вашего Fiddle, с прикладным моим ответом.