CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
LJ Wadowski
LJ Wadowski

Reputation: 6720

Select2 and Bootstrap 3 CSS Issue

I'm using Select2 plugin in my Bootstrap 3 based project. I cannot find a way to fix one problem. When I'm using select2 like a part of .input-group and selected value is long - it's broking structure. (I made some css to fit select2 into Bootstrap style but it's not affect display: style so I don't attaching it).

JS fiddle

When I'm using .input-group then it's changing children elements to display: table-cell but I cannot force elements to fit parent container. I cannot change max-width: of .input-group because it's not working. I did try to change table-layout but it's seems not working with elements different than <table>.

Any Ideas how can I fix that? PS. I cannot add any additional CSS class to any of those elements.

Upvotes: 2

Views: 1438

Answers (1)

JME
JME

Reputation: 3642

You should try the dropdownAutoWith option. 

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

Here's a fork of your Fiddle, with my answer applied.

Upvotes: 1

Related Questions