theme does not work with 4.0.0

Hi,
when adding .input-sm class to the select, style not change and it kept same height so no effect.
Thanks

I have added this theme to my project but when I set allowClear option, the "x" appears but when I click on it, the dropdown is displayed but nothing happen.

When seeing the demo in Select2 4.0.2 page, the clear works, so I think the problem is in this theme.

I saw two problems that can be eliminated very easily.

1. Based on bower.json specification please see the highlighted text below:
   Only one file per filetype.
   Do not include minified files.
   "main": [
   "dist/select2-bootstrap.css",
   "dist/select2-bootstrap.min.css"
   ],
   So these two rules are ignored in this case, but the best solution would be declaration of scss file as entry-point in order to be consistent with Select2 core. This is very important when you use with nodejs something like main-bower-files or wiredep .
2. Also it is very important to add !default flag to all variables under select2-bootstrap.scss file.

Before resize (correct):

After resizing to narrow (incorrect):

font-size is wrong, and maybe color also...simply remove it from select2-results__group style

.select2-container--bootstrap .select2-results__group {
    /*color: #777;*/
    display: block;
    padding: 6px 12px;
    /*font-size: 12px;*/
    line-height: 1.428571429;
    white-space: nowrap;
}

Prerequisites

• I have searched for similar issues in both open and closed tickets and cannot find a duplicate
• The issue still exists against the latest master branch of Select2 (not tested)
• This is not a usage question (Those should be directed to the community)
• I have attempted to find the simplest possible steos to reproduce the issue
• I have included a failing test as a pull request (Optional)

Steps to reproduce the issue

1. Create a horizontal boostrap form with a select input inside a div-tag with col-md-x option
2. Open select input

Expected behavior and actual behavior

When I follow those steps, I see...
a 1-pixel width under-/overflow

I was expecting...
no under-/overflow

Environment

Browsers

• Google Chrome
• Mozilla Firefox
• Internet Explorer
• Microsoft Edge

Operating System

• Windows
• Mac OS X
• Linux
• Mobile

Libraries

• jQuery version: 2.2.0
• Select2 version: 4.0.1
• Bootstrap version: 3.3.6
• Bootstrap-Theme version: master

Isolating the problem

• This bug happens on the examples page (see col-md-3)
• The bug happens consistently across all tested browsers
• This bug happens when using Select2 without other pluigns
• I can reproduce this bug in a jsbin

Example

Hi. First of all, thanks for the great work.
Seems like there is a wrong path to bootstrap *.less files in build.less

The less file is empty. Personally I like SASS more but sites like these accept .less only. And I need them cause my bootstrap variables are customized and are in less only. :(

When the option text is blank, the heigth is very reduced

Hi everybody!

A pic is better than any words:

As you can see the dropdown shadow is shifted down 6px so overlaps the select2 element. Also, probably the shadow should be above the dropdown, not below. I don't know if this is intended behaviour.

I fixed it by simply duplicate line 24:

$dropdown-box-shadow-below: 0 6px 12px rgba(0,0,0,.175) !default;
$dropdown-box-shadow-above: 0 -6px 12px rgba(0,0,0,.175) !default;

and using the style accordingly.

Thanks!

Note: Work in progress – depending on your use case, select2-bootstrap-theme might not be production-ready yet!

Could you specify why in the documentation? And for which cases is it not ready?

Those are the things I would expect to see in the Compatibility section of the documentation before deciding to choose it or not.

I've eliminated all CSS/JS files on a one-by-one basis to check that there are no conflicts. However, it seems that I can't get select2-bootstrap-prepend to display the field correctly.

I'm using Bootstrap v3.3.4 and Select2 4.0.0-rc.2.

<div class="input-group select2-bootstrap-prepend">
<span class="input-group-addon"><i class="fa fa-fw fa-globe"></i></i></span>
<select id="join_country" name="join_country" class="form-control" value="" required="required">
<option></option>
<option>01</option>
<option>02</option>
</select>
</div>
<script>
$("#join_country").select2({
minimumResultsForSearch: -1,
placeholder: "Country",
allowClear: true
});
</script>

Is it possible to have a input add on in the middle of two select2 drop downs? Or have a select2 drop down - input add on - input text field? Is there a class for this?

Ex: [dropdown][= sign][input field]

Hi,

• [email protected]

• [email protected]

• [email protected]

• [email protected]

• I required the packages with yarn

• I load the select2 + select2-bootstrap css files

• I load the select2 js file

• I declare to use the bootstrap theme globaly

Nothing to do, my input is not "LG", nor "SM"...
When I load the page, my default select is displayed in LG then a few milliseconds later the plugins loads I guess and the input change its height to "Medium".

<select class="companies-select2 form-control input-lg select2-hidden-accessible" name="company_id" tabindex="-1" aria-hidden="true"><option value="1">Google</option><option value="2">Yahoo</option></select>

Am I missing something?

Cloned repo, then executed the command: npm install

npm ERR! peerinvalid The package grunt does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants grunt@>=1.0.1
npm ERR! peerinvalid Peer [email protected] wants grunt@>=0.4.0
npm ERR! peerinvalid Peer [email protected] wants grunt@>=0.4.0
npm ERR! peerinvalid Peer [email protected] wants grunt@>=0.4.0
npm ERR! peerinvalid Peer [email protected] wants grunt@>=0.4.1
npm ERR! peerinvalid Peer [email protected] wants grunt@>=0.4.5
npm ERR! peerinvalid Peer [email protected] wants grunt@~0.4.0

npm ERR! System Linux 3.16.0-4-amd64
npm ERR! command "/usr/bin/node" "/usr/bin/npm" "install"
npm ERR! cwd /tmp/select2/bower_components/select2-bootstrap-theme
npm ERR! node -v v0.10.26
npm ERR! npm -v 1.4.3
npm ERR! code EPEERINVALID
npm ERR! 
npm ERR! Additional logging details can be found in:
npm ERR!     /tmp/select2/bower_components/select2-bootstrap-theme/npm-debug.log
npm ERR! not ok code 0

It seems like peerDependecies are invalid.

Please add copyright statement to select2-bootstrap.css.

Thanks.

Could you publish the package to npm?

As seen in the screenshot, border radius on the select2 element is not adjusted when situated inside an input group.

Reference:
http://getbootstrap.com/components/#input-groups

Please add a css to just look like bootstrap dropdown, Without border and down arrow next to the selected text.. Similar to the below image..

@fk I know i'm a little late to the game but just wanting to make sure this is an issue.

A few select2's in your demonstrations blows outside the form-group

• Select2 multi append Radiobutton
• Select2 multi append
• Select2 multi prepend

In the https://github.com/select2/select2-bootstrap-theme/blob/master/dist/select2-bootstrap.css

I needed to change this

.select2-container--bootstrap .select2-selection--single {
  height: 34px;
  line-height: 1.42857143;
  padding: 6px 24px 6px 12px;
  /**
     * Adjust the single Select2's dropdown arrow button appearance.
     */
}

To

.select2-container--bootstrap .select2-selection--single {
  height: 44px;
  line-height: 1.42857143;
  padding: 10px 24px 6px 12px;
  /**
     * Adjust the single Select2's dropdown arrow button appearance.
     */
}

my html code:

<div class="input-group">
           <div class="form-group">
                   <select data-placeholder="Selecione um aluno" class="form-control " id="aluno" >
                               <option>1</option>
                               <option>2</option>
                    </select>
            </div>
            <div class="input-group-btn">
                    <button type="submit" name="save"  value="Salvar"  class="btn btn-success" ><i class="glyphicon glyphicon-plus"></i></button>
             </div>
</div>

Hello,

I thought bootstrap is created to make websites responsive, but this plugin doesn't fix the responsiveness issues at all.
It does style it to a nice bootstrap looking button but without the responsiveness its useless.

Could this be implemented.

This may or may not be select2-bootstrap-theme's fault -- but I'm at a total loss for how to fix it. I turned on borders for the arrow button in the debugger, and the box is in the right place (mostly, it seems a little too far to the right), but the actual icon for the arrow button is to the left of the hitbox for the downarrow button)

http://fk.github.io/select2-bootstrap-theme/ completely broken. When is it expected to be fixed, any idea??

I use a custom border-width on my buttons and form-controls of 3px using a custom variable which I called $input-border-width.

At the moment I override the select2-bootstrap-theme like so:

.select2-container--bootstrap {
	.select2-selection {
		border-width:$input-border-width;
	}

	.select2-search--dropdown {
		.select2-search__field {
			border-width:$input-border-width;
		}
	}

	.select2-dropdown {
		border-width:$input-border-width;
	}
}

It would be nice to have variable like $s2bs-input-border-width available in the first place, that spares me those additional lines.

That doesn't change anything for existing installs, yet enables users to customize the styles in a more consistent way.

Hi,
thank you for the great job.

I have a problem with the class "input-sm" combined with multiple choices: i can't obtain the right height.
You can see the problem here: https://codepen.io/policchio/pen/dOPLdp
If I try to delete "height: auto" in the class ".select2-selection--multiple" I obtain the right height, but obviously the wrong behaviour.

Thank you in advance!

I am not sure if I am doing something wrong or it is an issue. When I resize the browser window or inspect the page for mobile devices the component is not shrinking it stays the same size.

You can now have Select2 copy over the container CSS classes using the old containerCssClass method. You can specify :all: to have Select2 copy over all classes on the container, similar to what it used to do.

This requires the full build, and it's only available on master at the moment. I have no idea when I'm going to be finalizing this release, but I hope it's soon.

When using ajax and paging there is a 'load more results' message which shows in the dropdown. There needs to be css added for this to match the rest of the dropdown box. Something like :

.select2-container--bootstrap .option.load-more {
    padding:6px;
}

With less-grails-asset-pipeline plugin https://github.com/bertramdev/less-grails-asset-pipeline I get following sintax error during compilation:

2015-08-07 17:03:01,065 [http-bio-8070-exec-2] ERROR [/manga].[default] - Servlet.service() for servlet [default] in context with path [/manga] threw exception [Filter execution threw an exception] with root cause
com.github.sommeri.less4j.Less4jException: Could not compile less. 2 error(s) occurred:
ERROR 183:12 mismatched character 'h' expecting '>'
182:
183: &--highlighted[aria-selected] {
184: background-color: @dropdown-link-active-bg;

ERROR 332:12 mismatched character 'a' expecting '>'
331: margin-top: -1px;
332: &--above {
333: margin-top: 1px;

at com.github.sommeri.less4j.core.ThreadUnsafeLessCompiler.compile(ThreadUnsafeLessCompiler.java:78)
at com.github.sommeri.less4j.LessCompiler$compile.call(Unknown Source)
at asset.pipeline.less.Less4jProcessor.process(Less4jProcessor.groovy:27)
at asset.pipeline.Processor$process.call(Unknown Source)
at asset.pipeline.less.LessAssetFile.processedStream(LessAssetFile.groovy:42)
at asset.pipeline.DirectiveProcessor.fileContents(DirectiveProcessor.groovy:295)
at asset.pipeline.DirectiveProcessor$fileContents$2.call(Unknown Source)
at org.codehaus.groovy.runtime.callsite.CallSiteArray.defaultCall(CallSiteArray.java:45)
at asset.pipeline.DirectiveProcessor$fileContents$2.call(Unknown Source)
at asset.pipeline.AssetPipeline.serveUncompiledAsset(AssetPipeline.groovy:65)
at asset.pipeline.AssetPipeline$serveUncompiledAsset$1.call(Unknown Source)
at asset.pipeline.grails.AssetPipelineFilter.doFilter(AssetPipelineFilter.groovy:98)

Hello,

The theme is not compatible with input group addon. (border is rounded)
http://getbootstrap.com/components/#input-groups-basic

Hello, I noticed that when the select2 is in a modal, the search input is not focusable (search works in IE11 but not in Firefox), also the up and down keys are not working too.
jquery: 1.12.3
bootstrap: 3.3.6
select2: 4.0.2

working page with the issue:
http://debug.esy.es/select2/

Is there bootstrap 4 version?

Hi I am not sure if it is in your hands or not but I feel that the nuget package for the theme is utterly outdated: https://www.nuget.org/packages/Select2-Bootstrap/

What is the story with modals? In the previous version I had something like this which allowed it to work fine in modals :

.modal-open .select2-drop-mask {
  z-index: 10051;
}

.modal-open .select2-drop {
  z-index: 10052;
}

.modal-open .select2-search {
  z-index: 10053;
}

the classes have changed obviously so that will not work or maybe even then it won't. I haven't looked deeper into it yet, but if anyone has please share. I did a quick test with the current theme and nothing works in modals... this should be added as a default or at least a commented note in the css with the class names which are affected.

I think it's not recommended and it's not required that change font-family of select item because

• select2.css has not change any font-family
• Make conflict with default font of project
• Consume time and bandwidth a little

Im using select2.full.js
Select2 4.0.3 and Css 0.1.0-beta.8

I put this on select2 config but the select box doesnt open. doesnt show the options
containerCssClass: ':all:'

the problem that I found is that select has a class called "select2"
so when document loads
$(".select2").select2({
width: '100%',
placeholder: function(){
$(this).data('placeholder');
},
containerCssClass: ':all:',
});
it copies the select2 class to the container and that makes all broken.
there is another way to make this without the :all: class ?

on the examples page, this is not happening. Why ? Thanks !!!

Hi,
are there any plans to offer this file over jsdelivr.com?

https://github.com/jsdelivr/jsdelivr/blob/master/CONTRIBUTING.md

I would be glad.

NOTE: This is a Chome and Firefox only bug. (IE 11 works fine)

Focus is lost when you do one of the following:

• Select an item from the list (Using the filter, arrow keys or mouse)
• Drop down the pick list then press tab (without selecting anything)

Basically when the dropdown list closes, focus is lost. Pressing tab moves the focus to the first item on the page.

Repro Steps:

1. Load this URL: https://select2.github.io/examples.html
2. Click on the second drop down on the page (or any that has Select2 applied)
3. Select an option
4. Press Tab
   RESULT: The Logo at the top of the screen is focused.

Tested on Chrome 56 and Firefox 38.5.1 using Windows 7 also tested with Chrome in my app using the latest build as of 3/10/2017.

UPDATE: This bug does not occur if you use the "minimumResultsForSearch: Infinity" option. But then you cannot type to match on items in the list.

bower.json chouldn't have select2 as dependency?

This will ensure using the right theme version compatible with select2 version used in own projects.

The same applies to bootstrap.

Hi, thanks for this project initiative, looks very nice!

I see the bower.json file but the package is not found on bower.io: http://bower.io/search/?q=select2-bootstrap-theme

Can you please register it? Thanks.

How can I make select2 as addon, select width - 0px?

<div class="input-group select2-bootstrap-append">
    <input type="text" />
    <span class="input-group-btn">
        <select class="select2"></select>
    </span>                     
</div>

Hi all,

since beta8 I can't use this repo with rails-assets anymore (problem relates to the following commit: 494123d)

Rails assets uses bower's main property to decide which files it bundles.. in result of the mentioned commit I don't have the compiled files available anymore. You might want to consider to add the dist files to bower main property again? So long I will use beta7.

Cheers Florian

There are not css for select2-selection__clear with multiple=true (select2-selection--multiple). Clear button render after inline input, but not at right side of select2 control.

When I use the bootstrap theme and load the data remotely the placeholders disappear, anyone noticed the same?