diff --git a/README.md b/README.md index c4d8fbd..98c3690 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,26 @@ -CSS for making Select2 fit in with Bootstrap a bit better, -**updated for Bootstrap v3.0.0**. +[select2-bootstrap-css](https://github.com/t0m/select2-bootstrap-css), +forked for Bootstrap 3. +### This forks work has been reintegrated into the original [select2-bootstrap-css](https://github.com/t0m/select2-bootstrap-css) in a [dedicated "bootstrap3"-branch](https://github.com/t0m/select2-bootstrap-css/tree/bootstrap3). [Please go there to be sure to grab the latest version](https://github.com/t0m/select2-bootstrap-css/tree/bootstrap3) and to file issues or pull requests. This repository will stay up for now to offer access to the [demonstrations](http://fk.github.io/select2-bootstrap-css/). + +Demonstrations available at http://fk.github.io/select2-bootstrap-css/ -Tested with Bootstrap 3.0.0 and Select2 3.3.2, 3.4.1 and 3.4.2 and in latest Chrome, Safari, Firefox, Opera (Mac) and IE8-IE10. +Tested with Bootstrap 3.0.0 and Select2 3.3.2, 3.4.1, 3.4.2, 3.4.3, 3.4.4, 3.4.5 in latest Chrome, Safari, Firefox, Opera (Mac) and IE8-IE10. -Known issues: +##### Known issues - * "Loading Remote Data" and "Infinite Scroll" not addressed yet, the loading indicator position probably needs some adjustments - * IE8/IE9/IE10, Firefox: Select2 in "Bootstrap input group with radio/checkbox addon" and .input-lg misses 1px in height (IE9/IE10, Firefox behave the same for Bootstrap 3's "input group sizing"-demo at http://getbootstrap.com/components/#input-groups-sizing) - * IE9/IE10: Select2 in "Bootstrap input group with button addon" (no height modifier, i. e. .input-sm, .input-lg) also misses 1px in height (bug _not_ inherited from Bootstrap 3) + * IE8/IE9/IE10, Firefox: Select2 in "Bootstrap input group with radio/checkbox addon" and `.input-lg is 1px off in height (IE9/IE10, Firefox behave the same for Bootstrap 3's "input group sizing"-demo at http://getbootstrap.com/components/#input-groups-sizing … looks like Bootstrap 3's radio/checkbox-addon is 1px too high) + * IE9/IE10: Select2 in "Bootstrap input group with button addon" (no height modifier, i. e. `.input-sm`, `.input-lg`) also is 1px off in height (bug _not_ inherited from Bootstrap 3) * box-shadow for .select2-search input do not fit Bootstrap's defaults * the Select2 dropdown could inherit look-and-feel from Bootstrap dropdowns and/or could honor Bootstrap height sizing classes * border-radii for opened Select2 dropdowns could consistently be set to be … round ;-) * checkboxes and radio-buttons in "Bootstrap input groups" could be vertically aligned to the top (instead of center) if combined with a multi Select2 to address variable height of the Select2 container + +##### Credits + + Original [select2-bootstrap-css](https://github.com/t0m/select2-bootstrap-css) for Bootstrap 2 by [Tom Terrace](https://github.com/t0m) ([@tterrace](https://twitter.com/tterrace)). + +###### Contributors + + * [Juri Strumpflohner](https://github.com/juristr) ([@juristr](https://twitter.com/juristr)) – [adding missing display:block](https://github.com/fk/select2-bootstrap-css/pull/1) diff --git a/_jekyll/3.4.3.html b/_jekyll/3.4.3.html new file mode 100644 index 0000000..0fe00c8 --- /dev/null +++ b/_jekyll/3.4.3.html @@ -0,0 +1,4 @@ +--- +layout: default +version: 3.4.3 +--- diff --git a/_jekyll/3.4.4.html b/_jekyll/3.4.4.html new file mode 100644 index 0000000..e941f8b --- /dev/null +++ b/_jekyll/3.4.4.html @@ -0,0 +1,4 @@ +--- +layout: default +version: 3.4.4 +--- diff --git a/_jekyll/3.4.5.html b/_jekyll/3.4.5.html new file mode 100644 index 0000000..77a7f79 --- /dev/null +++ b/_jekyll/3.4.5.html @@ -0,0 +1,4 @@ +--- +layout: default +version: 3.4.5 +--- diff --git a/_jekyll/_config.yml b/_jekyll/_config.yml index e21a526..c237c82 100644 --- a/_jekyll/_config.yml +++ b/_jekyll/_config.yml @@ -2,6 +2,9 @@ versions: - 3.3.2 - 3.4.1 - 3.4.2 + - 3.4.3 + - 3.4.4 + - 3.4.5 - master title: diff --git a/_jekyll/_includes/footer.html b/_jekyll/_includes/footer.html index 77cffbe..6789f19 100644 --- a/_jekyll/_includes/footer.html +++ b/_jekyll/_includes/footer.html @@ -4,6 +4,6 @@ Bootstrap is a front-end framework for fast, sleek, and mobile-first web development.
Select2 is a jQuery based replacement for select boxes.

-

<3 @tterrace

+

❤ @fk × contributors

\ No newline at end of file diff --git a/_jekyll/_layouts/default.html b/_jekyll/_layouts/default.html index e3dd04c..f8391bd 100644 --- a/_jekyll/_layouts/default.html +++ b/_jekyll/_layouts/default.html @@ -279,9 +279,7 @@

Button Addons Separated link - +
@@ -305,7 +303,7 @@

Button Addons
- +
@@ -1316,7 +1266,7 @@

Button Addons
- +

@@ -1558,16 +1508,66 @@

Disabled inputs < data.total; // whether or not there are more results available + + // notice we return the value of more so Select2 knows if more results can be loaded + return {results: data.movies, more: more}; + } + }, + initSelection: function(element, callback) { + // the input tag has a value attribute preloaded that points to a preselected movie's id + // this function resolves that id attribute to an object that select2 can render + // using its formatResult renderer - that way the movie name is shown preselected + var id=$(element).val(); + if (id!=="") { + $.ajax("http://api.rottentomatoes.com/api/public/v1.0/movies/"+id+".json", { + data: { + apikey: "w2uyd7u9mj53nhq2f8mpzquq" + }, + dataType: "jsonp" + }).done(function(data) { callback(data); }); + } + }, + formatResult: movieFormatResult, // omitted for brevity, see the source of this page + formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page + dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller + escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results }); + function movieFormatResult(movie) { + var markup = ""; + if (movie.posters !== undefined && movie.posters.thumbnail !== undefined) { + markup += ""; + } + markup += "
" + movie.title + "
"; + if (movie.critics_consensus !== undefined) { + markup += "
" + movie.critics_consensus + "
"; + } + else if (movie.synopsis !== undefined) { + markup += "
" + movie.synopsis + "
"; + } + markup += "
" + return markup; + } + + function movieFormatSelection(movie) { + return movie.title; + } + $('button[data-select2-open]').click(function(){ $('#' + $(this).data('select2-open')).select2('open'); }); diff --git a/docs/3.4.1.html b/docs/3.4.1.html index b77d81b..d7389c9 100644 --- a/docs/3.4.1.html +++ b/docs/3.4.1.html @@ -37,6 +37,12 @@
  • 3.4.2
    • +
  • 3.4.3
    • + +
  • 3.4.4
    • + +
  • 3.4.5
    • +
  • master
    • @@ -1182,63 +1188,7 @@

    Button Addons Separated link

    - +
    @@ -1316,7 +1266,7 @@

    Button Addons
    - +

    @@ -1558,16 +1508,66 @@

    Disabled inputs < data.total; // whether or not there are more results available + + // notice we return the value of more so Select2 knows if more results can be loaded + return {results: data.movies, more: more}; + } + }, + initSelection: function(element, callback) { + // the input tag has a value attribute preloaded that points to a preselected movie's id + // this function resolves that id attribute to an object that select2 can render + // using its formatResult renderer - that way the movie name is shown preselected + var id=$(element).val(); + if (id!=="") { + $.ajax("http://api.rottentomatoes.com/api/public/v1.0/movies/"+id+".json", { + data: { + apikey: "w2uyd7u9mj53nhq2f8mpzquq" + }, + dataType: "jsonp" + }).done(function(data) { callback(data); }); + } + }, + formatResult: movieFormatResult, // omitted for brevity, see the source of this page + formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page + dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller + escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results }); + function movieFormatResult(movie) { + var markup = ""; + if (movie.posters !== undefined && movie.posters.thumbnail !== undefined) { + markup += ""; + } + markup += "
    " + movie.title + "
    "; + if (movie.critics_consensus !== undefined) { + markup += "
    " + movie.critics_consensus + "
    "; + } + else if (movie.synopsis !== undefined) { + markup += "
    " + movie.synopsis + "
    "; + } + markup += "
    " + return markup; + } + + function movieFormatSelection(movie) { + return movie.title; + } + $('button[data-select2-open]').click(function(){ $('#' + $(this).data('select2-open')).select2('open'); }); diff --git a/docs/3.4.2.html b/docs/3.4.2.html index 67a9fdb..afa2547 100644 --- a/docs/3.4.2.html +++ b/docs/3.4.2.html @@ -37,6 +37,12 @@
  • 3.4.2
    • +
  • 3.4.3
    • + +
  • 3.4.4
    • + +
  • 3.4.5
    • +
  • master
    • @@ -1182,63 +1188,7 @@

    Button Addons Separated link - +
    @@ -1316,7 +1266,7 @@

    Button Addons
    - +

    @@ -1558,16 +1508,66 @@

    Disabled inputs < data.total; // whether or not there are more results available + + // notice we return the value of more so Select2 knows if more results can be loaded + return {results: data.movies, more: more}; + } + }, + initSelection: function(element, callback) { + // the input tag has a value attribute preloaded that points to a preselected movie's id + // this function resolves that id attribute to an object that select2 can render + // using its formatResult renderer - that way the movie name is shown preselected + var id=$(element).val(); + if (id!=="") { + $.ajax("http://api.rottentomatoes.com/api/public/v1.0/movies/"+id+".json", { + data: { + apikey: "w2uyd7u9mj53nhq2f8mpzquq" + }, + dataType: "jsonp" + }).done(function(data) { callback(data); }); + } + }, + formatResult: movieFormatResult, // omitted for brevity, see the source of this page + formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page + dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller + escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results }); + function movieFormatResult(movie) { + var markup = ""; + if (movie.posters !== undefined && movie.posters.thumbnail !== undefined) { + markup += ""; + } + markup += "
    " + movie.title + "
    "; + if (movie.critics_consensus !== undefined) { + markup += "
    " + movie.critics_consensus + "
    "; + } + else if (movie.synopsis !== undefined) { + markup += "
    " + movie.synopsis + "
    "; + } + markup += "
    " + return markup; + } + + function movieFormatSelection(movie) { + return movie.title; + } + $('button[data-select2-open]').click(function(){ $('#' + $(this).data('select2-open')).select2('open'); }); diff --git a/docs/3.4.3.html b/docs/3.4.3.html new file mode 100644 index 0000000..c52b515 --- /dev/null +++ b/docs/3.4.3.html @@ -0,0 +1,1597 @@ + + + + + + select2-bootstrap-css + + + + + + + + +     + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    +

    Input Groups #

    +
    + +

    To let the Select2-widget know if any elements are directly being appended, prepended or both in the context of a Bootstrap input group, add .select2-bootstrap-prepend and/or .select2-bootstrap-append to the .input-group wrapper element to address the corresponding border-radii.

    + +
    + +
    + + + + +
    +
    + +
    + +
    + + + + +
    +
    + +
    + +
    + + + + +
    +
    + +
    + +
    + + + + +
    +
    + +
    + +
    + + + + +
    +
    + +
    + +
    + + + + +
    +
    + +
    + +
    +

    Control sizing #

    +
    + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    +
    + +
    + + + + +
    +
    +
    +
    + +
    + +
    +
    + + +

    Example block-level help text here.

    +
    +
    + + +
    +
    + + +
    +
    +
    + +
    + + + + +
    +
    +
    +
    + +
    + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    +
    + +
    + + + + +
    +
    +
    +
    + +
    +

    Button Addons #

    +
    + +
    +
    + +
    +
    + +
    + +
    +
    +
    + +
    + + + + +
    +
    +
    + +
    + +
    +
    + +
    +
    + + +
    + +
    +
    +
    + +
    + + + + +
    +
    +
    + +
    + +
    +
    + +
    + + + + +
    +
    +
    + +
    + + + + +
    +
    +
    + +
    +

    Disabled inputs #

    +
    + +
    +
    +
    + +
    + + + + +
    +
    +
    +
    +
    + +
    + + + + +
    +
    +
    +
    + +
    + +
    +
    +

    + Bootstrap is a front-end framework for fast, sleek, and mobile-first web development.
    + Select2 is a jQuery based replacement for select boxes. +

    +

    ❤ @fk × contributors

    +
    +
    + + + + + + + diff --git a/docs/3.4.4.html b/docs/3.4.4.html new file mode 100644 index 0000000..153555e --- /dev/null +++ b/docs/3.4.4.html @@ -0,0 +1,1597 @@ + + + + + + select2-bootstrap-css + + + + + + + + + + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    +

    Input Groups #

    +
    + +

    To let the Select2-widget know if any elements are directly being appended, prepended or both in the context of a Bootstrap input group, add .select2-bootstrap-prepend and/or .select2-bootstrap-append to the .input-group wrapper element to address the corresponding border-radii.

    + +
    + +
    + + + + +
    +
    + +
    + +
    + + + + +
    +
    + +
    + +
    + + + + +
    +
    + +
    + +
    + + + + +
    +
    + +
    + +
    + + + + +
    +
    + +
    + +
    + + + + +
    +
    + +
    + +
    +

    Control sizing #

    +
    + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    +
    + +
    + + + + +
    +
    +
    +
    + +
    + +
    +
    + + +

    Example block-level help text here.

    +
    +
    + + +
    +
    + + +
    +
    +
    + +
    + + + + +
    +
    +
    +
    + +
    + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    +
    + +
    + + + + +
    +
    +
    +
    + +
    +

    Button Addons #

    +
    + +
    +
    + +
    +
    + +
    + +
    +
    +
    + +
    + + + + +
    +
    +
    + +
    + +
    +
    + +
    +
    + + +
    + +
    +
    +
    + +
    + + + + +
    +
    +
    + +
    + +
    +
    + +
    + + + + +
    +
    +
    + +
    + + + + +
    +
    +
    + +
    +

    Disabled inputs #

    +
    + +
    +
    +
    + +
    + + + + +
    +
    +
    +
    +
    + +
    + + + + +
    +
    +
    +
    + +
    + +
    +
    +

    + Bootstrap is a front-end framework for fast, sleek, and mobile-first web development.
    + Select2 is a jQuery based replacement for select boxes. +

    +

    ❤ @fk × contributors

    +
    +
    + + + + + + + diff --git a/docs/3.4.5.html b/docs/3.4.5.html new file mode 100644 index 0000000..d34e0bc --- /dev/null +++ b/docs/3.4.5.html @@ -0,0 +1,1597 @@ + + + + + + select2-bootstrap-css + + + + + + + + + + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    +

    Input Groups #

    +
    + +

    To let the Select2-widget know if any elements are directly being appended, prepended or both in the context of a Bootstrap input group, add .select2-bootstrap-prepend and/or .select2-bootstrap-append to the .input-group wrapper element to address the corresponding border-radii.

    + +
    + +
    + + + + +
    +
    + +
    + +
    + + + + +
    +
    + +
    + +
    + + + + +
    +
    + +
    + +
    + + + + +
    +
    + +
    + +
    + + + + +
    +
    + +
    + +
    + + + + +
    +
    + +
    + +
    +

    Control sizing #

    +
    + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    +
    + +
    + + + + +
    +
    +
    +
    + +
    + +
    +
    + + +

    Example block-level help text here.

    +
    +
    + + +
    +
    + + +
    +
    +
    + +
    + + + + +
    +
    +
    +
    + +
    + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    +
    + +
    + + + + +
    +
    +
    +
    + +
    +

    Button Addons #

    +
    + +
    +
    + +
    +
    + +
    + +
    +
    +
    + +
    + + + + +
    +
    +
    + +
    + +
    +
    + +
    +
    + + +
    + +
    +
    +
    + +
    + + + + +
    +
    +
    + +
    + +
    +
    + +
    + + + + +
    +
    +
    + +
    + + + + +
    +
    +
    + +
    +

    Disabled inputs #

    +
    + +
    +
    +
    + +
    + + + + +
    +
    +
    +
    +
    + +
    + + + + +
    +
    +
    +
    + +
    + +
    +
    +

    + Bootstrap is a front-end framework for fast, sleek, and mobile-first web development.
    + Select2 is a jQuery based replacement for select boxes. +

    +

    ❤ @fk × contributors

    +
    +
    + + + + + + + diff --git a/docs/css/gh-pages.css b/docs/css/gh-pages.css index 3b0cc50..f736918 100644 --- a/docs/css/gh-pages.css +++ b/docs/css/gh-pages.css @@ -1,5 +1,5 @@ .demo { - padding: 80px 30px 30px; + padding: 80px 30px 30px; } .demo .footer { @@ -8,6 +8,15 @@ border-top: 1px solid #eee; } +.home { + background: #f8f8f8; +} + +.home .footer, +.home body { + background: transparent; +} + .home .container { max-width: 700px; } @@ -34,6 +43,8 @@ a:focus { margin-bottom: 15px; letter-spacing: -1px; color: #999; + font-weight: 300; + margin-top: 60px; } .jumbotron h2 { @@ -60,11 +71,17 @@ a:focus { border-color: #333; } +.jumbotron p a:hover { + border-color: #000; + border-width: 2px; +} + .jumbotron p a, .jumbotron-links a { font-weight: 500; color: #000; transition: all .1s ease-in-out; + border-bottom: 1px solid transparent; } .jumbotron-links { @@ -82,33 +99,30 @@ a:focus { } .jumbotron hr { - border-color: #ddd; - width: 100px; + border-color: #ddd; + width: 100px; } -.jumbotron .select2-wrapper { - font-size: 14px; - padding: 8px; - border-radius: 4px; - display: block; - width: 320px; +.jumbotron .select2-demos { + width: 300px; margin: 0 auto; text-align: left; } .jumbotron .form-group { background: none; - margin-bottom: 0; } .jumbotron .select2-wrapper { - margin-bottom: 20px; + margin-bottom: 16px; transition: all .1s ease-in-out; } -.jumbotron select, -.jumbotron .select2-container { - margin-bottom: 16px; +.btn-large { + padding: 10px 16px; + font-size: 18px; + line-height: 1.33; + border-radius: 6px; } .footer { @@ -122,10 +136,15 @@ a:focus { padding-bottom: 100px; font-size: 21px; } - .jumbotron .select2-wrapper { + .jumbotron .select2-demos { margin-bottom: 40px; } .jumbotron h1 { font-size: 50px; } + .btn-large { + margin: 20px 5px 20px 0; + padding: 18px 24px; + font-size: 21px; + } } \ No newline at end of file diff --git a/docs/css/select2-bootstrap.css b/docs/css/select2-bootstrap.css index 5497890..7e0a385 100644 --- a/docs/css/select2-bootstrap.css +++ b/docs/css/select2-bootstrap.css @@ -7,10 +7,16 @@ * Reset Bootstrap 3 .form-control styles which - if applied to the * original - - +
    +
    + - +
    +
    + -
    -
    - - - - +
    +
    +
    +
    + + + + + +
    -

    Select2 Bootstrap 3 CSS

    +

    Select2 Bootstrap 3 CSS

    -

    CSS to make Select2 fit in with Bootstrap, ready for use in original, LESS, Sass and Compass flavors.

    +

    CSS to make Select2 fit in with Bootstrap 3 – ready for use in original, LESS, Sass and Compass flavors.

    - Download from GitHub + Download CSS from GitHub
    @@ -218,14 +224,21 @@

    Select2 Bootstrap 3 CSS

    Demonstrations

    @@ -238,7 +251,7 @@

    Demonstrations

    Bootstrap is a front-end framework for fast, sleek, and mobile-first web development.
    Select2 is a jQuery based replacement for select boxes.

    -

    <3 @tterrace

    +

    ❤ @fk × contributors

    diff --git a/docs/master.html b/docs/master.html index ed01d17..525cc86 100644 --- a/docs/master.html +++ b/docs/master.html @@ -37,6 +37,12 @@
  • 3.4.2
    • +
  • 3.4.3
    • + +
  • 3.4.4
    • + +
  • 3.4.5
    • +
  • master
    • @@ -1182,63 +1188,7 @@

    Button Addons Separated link - +
    @@ -1316,7 +1266,7 @@

    Button Addons
    - +

    @@ -1558,16 +1508,66 @@

    Disabled inputs < data.total; // whether or not there are more results available + + // notice we return the value of more so Select2 knows if more results can be loaded + return {results: data.movies, more: more}; + } + }, + initSelection: function(element, callback) { + // the input tag has a value attribute preloaded that points to a preselected movie's id + // this function resolves that id attribute to an object that select2 can render + // using its formatResult renderer - that way the movie name is shown preselected + var id=$(element).val(); + if (id!=="") { + $.ajax("http://api.rottentomatoes.com/api/public/v1.0/movies/"+id+".json", { + data: { + apikey: "w2uyd7u9mj53nhq2f8mpzquq" + }, + dataType: "jsonp" + }).done(function(data) { callback(data); }); + } + }, + formatResult: movieFormatResult, // omitted for brevity, see the source of this page + formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page + dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller + escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results }); + function movieFormatResult(movie) { + var markup = ""; + if (movie.posters !== undefined && movie.posters.thumbnail !== undefined) { + markup += ""; + } + markup += "
    " + movie.title + "
    "; + if (movie.critics_consensus !== undefined) { + markup += "
    " + movie.critics_consensus + "
    "; + } + else if (movie.synopsis !== undefined) { + markup += "
    " + movie.synopsis + "
    "; + } + markup += "
    " + return markup; + } + + function movieFormatSelection(movie) { + return movie.title; + } + $('button[data-select2-open]').click(function(){ $('#' + $(this).data('select2-open')).select2('open'); }); diff --git a/lib/select2-bootstrap.less b/lib/select2-bootstrap.less index 1c11cd2..499579f 100644 --- a/lib/select2-bootstrap.less +++ b/lib/select2-bootstrap.less @@ -8,11 +8,16 @@ * Reset Bootstrap 3 .form-control styles which - if applied to the * original -element the Select2-plugin may be run against - * are copied to the .select2-container. + * + * 1. Overwrite .select2-container's original display:inline-block + * with Bootstrap 3's default for .form-control, display:block; + * courtesy of @juristr (@see https://github.com/fk/select2-bootstrap-css/pull/1) */ .select2-container.form-control { background: transparent; border: none; + display: block; /* 1 */ margin: 0; padding: 0; } @@ -408,3 +413,32 @@ } } } + +/** + * Address Select2's loading indicator position - which should not stick + * to the right edge of Select2's search input. + * + * 1. in .select2-search input + * 2. in Multi Select2's .select2-search-field input + * 3. in the status-message of infinite-scroll with remote data (@see http://ivaynberg.github.io/select2/#infinite) + * + * These styles alter Select2's default background-position of 100% + * and supply the new background-position syntax to browsers which support it: + * + * 1. Android, Safari < 6/Mobile, IE<9: change to a relative background-position of 99% + * 2. Chrome 25+, Firefox 13+, IE 9+, Opera 10.5+: use the new CSS3-background-position syntax + * + * @see http://www.w3.org/TR/css3-background/#background-position + * + * @todo Since both Select2 and Bootstrap 3 only support IE8 and above, + * we could use the :after-pseudo-element to display the loading indicator. + * Alternatively, we could supply an altered loading indicator image which already + * contains an offset to the right. + */ + +.select2-search input.select2-active, /* 1 */ +.select2-container-multi .select2-choices .select2-search-field input.select2-active, /* 2 */ +.select2-more-results.select2-active /* 3 */ { + background-position: 99%; /* 4 */ + background-position: right 4px center; /* 5 */ +} diff --git a/select2-bootstrap.css b/select2-bootstrap.css index 5497890..7e0a385 100644 --- a/select2-bootstrap.css +++ b/select2-bootstrap.css @@ -7,10 +7,16 @@ * Reset Bootstrap 3 .form-control styles which - if applied to the * original