f13ba12bea
* allowClear no longer shifts selections to a new line This fixes an issue that we have had with the "x" icon used by the `allowClear` option where selections that just barely interacted with the position of the "x" icon would be pushed to a new line that was separate from the normal second line of selections. This case was pretty rare, because you only had a ~9px area where the interaction could occur. The issue was cuased by the "x" icon being sized for the height of the text in the selection choices, which should be the same as how the selection choices themselves are sized. Unfortunately this did not take into account the fact that the selection choices are given a 1px border which increases their size by 2px, which is what lead to the odd behaviour. This behaviour could not be replicated without the 1px border because the height would then line up correctly. The issue can be fixed by adding a 2px margin to the bottom of the "x" icon, which would force overlapping selections on to the correct second line of selections. This was the method that many users have been using to correct this issue, but was not the method we chose to use. A 1px padding has been added to the "x" icon instead, which should expand the touch area of the "x" by a little while also increasing the height of the "x" by enough to prevent the overlapping. Fixes #4470 * Remove hard-coded height in tests Because tests are executed on different browsers, and because each browser sets their own line height, we cannot depend on the height of the default Select2 being consistent across browsers. As a result, we must write our tests to calcualte the expected height based on known data. In the case of this test, we can calculate ahead of time what two rows of selections is supposed to look like, instead of the edge case that we can otherwise encounter. |
||
|---|---|---|
| .github | ||
| dist | ||
| docs | ||
| src | ||
| tests | ||
| .editorconfig | ||
| .gitignore | ||
| .jshintignore | ||
| .jshintrc | ||
| .travis.yml | ||
| bower.json | ||
| CHANGELOG.md | ||
| component.json | ||
| composer.json | ||
| Gruntfile.js | ||
| LICENSE.md | ||
| package.json | ||
| README.md | ||
Select2
Select2 is a jQuery-based replacement for select boxes. It supports searching, remote data sets, and pagination of results.
To get started, checkout examples and documentation at https://select2.org/
Use cases
- Enhancing native selects with search.
- Enhancing native selects with a better multi-select interface.
- Loading data from JavaScript: easily load items via AJAX and have them searchable.
- Nesting optgroups: native selects only support one level of nesting. Select2 does not have this restriction.
- Tagging: ability to add new items on the fly.
- Working with large, remote datasets: ability to partially load a dataset based on the search term.
- Paging of large datasets: easy support for loading more pages when the results are scrolled to the end.
- Templating: support for custom rendering of results and selections.
Browser compatibility
- IE 8+
- Chrome 8+
- Firefox 10+
- Safari 3+
- Opera 10.6+
Usage
You can source Select2 directly from a CDN like JSDliver or CDNJS, download it from this GitHub repo, or use one of the integrations below.
Integrations
Third party developers have created plugins for platforms which allow Select2 to be integrated more natively and quickly. For many platforms, additional plugins are not required because Select2 acts as a standard <select> box.
Plugins
- Django
- Drupal - drupal-select2
- Meteor - meteor-select2
- Ruby on Rails - select2-rails
- Wicket - wicketstuff-select2
- Yii 2 - yii2-widget-select2
- Angularjs - mdr-angular-select2
Themes
- Bootstrap 3 - select2-bootstrap-theme
- Bootstrap 4 - select2-bootstrap4-theme
- Flat UI - select2-flat-theme
- Metro UI - select2-metro
Missing an integration? Modify this README and make a pull request back here to Select2 on GitHub.
Internationalization (i18n)
Select2 supports multiple languages by simply including the right language JS
file (dist/js/i18n/it.js, dist/js/i18n/nl.js, etc.) after
dist/js/select2.js.
Missing a language? Just copy src/js/select2/i18n/en.js, translate it, and
make a pull request back to Select2 here on GitHub.
Documentation
The documentation for Select2 is available
through GitHub Pages and is located within the separate select2/docs repository.
Community
You can find out about the different ways to get in touch with the Select2 community at the Select2 community page.
Copyright and license
The license is available within the repository in the LICENSE file.