Problem: When you select an option that is larger than the Select2, the control would expand itself to fit the newly selected option, even if it means exceeding the width of the parent container.

Expected outcome: If the selected option is large, then the text content should become clipped and text ellipsis should be visible.

You can see this in the demonstration website if you manually adjust any of the Select2 controls width to an arbitrary small value and then proceed to selecting any options.

Hey fk/t0m, select2 is in new 4.0 beta. Still not finished but i'm very exited if you will make an update to this. Select2 now supports a special theme option. May this becomes very handy ;)

Regards Nyro

This is directed specifically to @fk

Are you the publisher of https://www.npmjs.org/package/select2-bootstrap-css and (if so) do you have plans to keep your branch here published on npmjs.org?

This is the best solution for implementing select2 in bootstrap I've seen until now!

Unfortunately it doesn't allow yet for the responsive functionality of Bootstrap. Would it be possible to add that, so that when screen-width is max. 767px, the multiselect container gets a 100% width?

https://github.com/ivaynberg/select2/issues/942 https://github.com/ivaynberg/select2/issues/1645

Is this issue solved in this select2-bootstrap-css component?

Hello,

I'm trying to use the "input-append" control from Bootstrap with Select2 but the appended button is shown very distant from the Select2 component.

Here is the Fiddle reproducing the problem: http://jsfiddle.net/JRjcY/.

I would be very nice to support this use case.

As far as I can tell, the colour of a focused input's box-shadow is hardcoded to rgba(82, 168, 236, 0.6).

With bootstrap.less, you can modify the colour with @input-border-focus. Would it be possible to add this functionality?

I modified it in the following way for my project, but do not know this project and LESS well enough to know if this is a safe change:

.select2-container-active .select2-choice,
.select2-container-multi.select2-container-active .select2-choices {
  @color-rgba: rgba(red(@input-border-focus), green(@input-border-focus), blue(@input-border-focus), .6);
  border-color: @input-border-focus;
  outline: none;
  @shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px @color-rgba;
  .box-shadow(@shadow);
  @transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  .transition(@transition);
}

The bootstrap 3 select2-bootstrap.css has a comment that says:

/**
 * Address Bootstrap's validation states and change Select2's border colors and focus states.
 * Apply .has-warning, .has-danger or .has-succes to #select2-drop to match Bootstraps' colors.
 */

If I apply .has-error to .select2-drop it doesn't work quite right:

The border of the drop changes to red, but the upper part...the part above the Select2 search box...which has the class .select2-container stays the standard bootstrap blue.

If I move the section of css dealing with the validation states below the section dealing with active states, it then works.

Hey t0m,

Just an FYI, people who use package managers like bower or any other package/dependency manager that looks for specific git tags for every release are missing out on the 1.3.0 release on the bootstrap3 branch. There is no tag in @fk's repo either.

I ended up forking the repo and creating the tag from t0m's 1.3.0 commit on the bootstrap3 branch. Just thought I'd let you two know.

Thanks for your contribution!

Included are some tests to show that LESS and SASS are generating the right CSS. The test output from LESS includes the mixins, because LESS has no way to exclude mixin classes from the output.

Hi,

first of all, thanks for your great work! But in my opinion if found a bug, because you use background: none, the select box look different on each background, which looks a littlebit ugly.

I have a white page and on that page is a bootstrap "well" in which I use a select2, now this select2 have grey background and select2 boxes under that "well" have a white background, for me they should all look the same, white in that case.

A nice new feature would be if I would have the possibility to enable the bootstrap theme on a select2 with an option or so, so that I can use both styles on one page.

Kind regards

When placing a select2 next to a bootstrap input-prepend addon, the select2 is not styled properly. It needs:

• no rounded corners on the left side (right side for input-append)
• same height and padding as the add-on

For this, with default bootstrap variables I am using this css:

.input-prepend .select2-container .select2-choice{
    font-size:14px;
    line-height:20px;
    height:20px;
    padding-top:4px;
    padding-bottom:4px;
}

.input-prepend .select2-container .select2-choice{
    border-radius: 0 4px 4px 0;
}

In terms of bootstrap variables, the 14px and 20px are clearly @baseFontSize and @baseLineHeight.. not sure what the 4px padding I found by trial and error should be defined as...