Fixed dropdown for responsive widths

When we re-implemented support for responsive widths, through the
use of percentages, we never moved the support over to the dropdowns.
So the dropdowns generally were not large enough, and when resized
they never re-adjusted, and they didn't fully work as intended.

This fixes the issue by automatically resizing the dropdown whenever
it is repositioned, mainly to handle new scrollbars, which will
ensure that it is always the same width as the container.

This also adds a section to the examples for responsive design,
just like in the old documentation.

This closes https://github.com/select2/select2/issues/2949.

dist/js/select2.amd.full.js

@@ -3276,10 +3276,12 @@ define('select2/dropdown/attachBody',[
 
         container.on('results:all', function () {
           self._positionDropdown();
+          self._resizeDropdown();
         });
 
         container.on('results:append', function () {
           self._positionDropdown();
+          self._resizeDropdown();
         });
       }
     });
@@ -3306,8 +3308,6 @@ define('select2/dropdown/attachBody',[
       top: -999999
     });
 
-    $dropdown.width($container.outerWidth(false));
-
     this.$container = $container;
   };
 
@@ -3336,6 +3336,7 @@ define('select2/dropdown/attachBody',[
     $(window).on(scrollEvent + ' ' + resizeEvent + ' ' + orientationEvent,
       function (e) {
       self._positionDropdown();
+      self._resizeDropdown();
     });
   };
 
@@ -3411,10 +3412,19 @@ define('select2/dropdown/attachBody',[
     this.$dropdownContainer.css(css);
   };
 
+  AttachBody.prototype._resizeDropdown = function () {
+    this.$dropdownContainer.width();
+
+    this.$dropdown.css({
+      width: this.$container.outerWidth(false) + 'px'
+    });
+  };
+
   AttachBody.prototype._showDropdown = function (decorated) {
     this.$dropdownContainer.appendTo(this.$dropdownParent);
 
     this._positionDropdown();
+    this._resizeDropdown();
   };
 
   return AttachBody;
@@ -3940,7 +3950,7 @@ define('select2/options',[
     if ($e.data('ajax-url')) {
       if (console && console.warn) {
         console.warn(
-          'Select2: The `data-ajax-attribute` has been changed to ' +
+          'Select2: The `data-ajax-url` attribute has been changed to ' +
           '`data-ajax--url` and support for the old attribute will be removed' +
           ' in future versions of Select2.'
         );

dist/js/select2.amd.js

@@ -3276,10 +3276,12 @@ define('select2/dropdown/attachBody',[
 
         container.on('results:all', function () {
           self._positionDropdown();
+          self._resizeDropdown();
         });
 
         container.on('results:append', function () {
           self._positionDropdown();
+          self._resizeDropdown();
         });
       }
     });
@@ -3306,8 +3308,6 @@ define('select2/dropdown/attachBody',[
       top: -999999
     });
 
-    $dropdown.width($container.outerWidth(false));
-
     this.$container = $container;
   };
 
@@ -3336,6 +3336,7 @@ define('select2/dropdown/attachBody',[
     $(window).on(scrollEvent + ' ' + resizeEvent + ' ' + orientationEvent,
       function (e) {
       self._positionDropdown();
+      self._resizeDropdown();
     });
   };
 
@@ -3411,10 +3412,19 @@ define('select2/dropdown/attachBody',[
     this.$dropdownContainer.css(css);
   };
 
+  AttachBody.prototype._resizeDropdown = function () {
+    this.$dropdownContainer.width();
+
+    this.$dropdown.css({
+      width: this.$container.outerWidth(false) + 'px'
+    });
+  };
+
   AttachBody.prototype._showDropdown = function (decorated) {
     this.$dropdownContainer.appendTo(this.$dropdownParent);
 
     this._positionDropdown();
+    this._resizeDropdown();
   };
 
   return AttachBody;
@@ -3940,7 +3950,7 @@ define('select2/options',[
     if ($e.data('ajax-url')) {
       if (console && console.warn) {
         console.warn(
-          'Select2: The `data-ajax-attribute` has been changed to ' +
+          'Select2: The `data-ajax-url` attribute has been changed to ' +
           '`data-ajax--url` and support for the old attribute will be removed' +
           ' in future versions of Select2.'
         );

dist/js/select2.full.js

@@ -3714,10 +3714,12 @@ define('select2/dropdown/attachBody',[
 
         container.on('results:all', function () {
           self._positionDropdown();
+          self._resizeDropdown();
         });
 
         container.on('results:append', function () {
           self._positionDropdown();
+          self._resizeDropdown();
         });
       }
     });
@@ -3744,8 +3746,6 @@ define('select2/dropdown/attachBody',[
       top: -999999
     });
 
-    $dropdown.width($container.outerWidth(false));
-
     this.$container = $container;
   };
 
@@ -3774,6 +3774,7 @@ define('select2/dropdown/attachBody',[
     $(window).on(scrollEvent + ' ' + resizeEvent + ' ' + orientationEvent,
       function (e) {
       self._positionDropdown();
+      self._resizeDropdown();
     });
   };
 
@@ -3849,10 +3850,19 @@ define('select2/dropdown/attachBody',[
     this.$dropdownContainer.css(css);
   };
 
+  AttachBody.prototype._resizeDropdown = function () {
+    this.$dropdownContainer.width();
+
+    this.$dropdown.css({
+      width: this.$container.outerWidth(false) + 'px'
+    });
+  };
+
   AttachBody.prototype._showDropdown = function (decorated) {
     this.$dropdownContainer.appendTo(this.$dropdownParent);
 
     this._positionDropdown();
+    this._resizeDropdown();
   };
 
   return AttachBody;
@@ -4378,7 +4388,7 @@ define('select2/options',[
     if ($e.data('ajax-url')) {
       if (console && console.warn) {
         console.warn(
-          'Select2: The `data-ajax-attribute` has been changed to ' +
+          'Select2: The `data-ajax-url` attribute has been changed to ' +
           '`data-ajax--url` and support for the old attribute will be removed' +
           ' in future versions of Select2.'
         );

dist/js/select2.js

@@ -3714,10 +3714,12 @@ define('select2/dropdown/attachBody',[
 
         container.on('results:all', function () {
           self._positionDropdown();
+          self._resizeDropdown();
         });
 
         container.on('results:append', function () {
           self._positionDropdown();
+          self._resizeDropdown();
         });
       }
     });
@@ -3744,8 +3746,6 @@ define('select2/dropdown/attachBody',[
       top: -999999
     });
 
-    $dropdown.width($container.outerWidth(false));
-
     this.$container = $container;
   };
 
@@ -3774,6 +3774,7 @@ define('select2/dropdown/attachBody',[
     $(window).on(scrollEvent + ' ' + resizeEvent + ' ' + orientationEvent,
       function (e) {
       self._positionDropdown();
+      self._resizeDropdown();
     });
   };
 
@@ -3849,10 +3850,19 @@ define('select2/dropdown/attachBody',[
     this.$dropdownContainer.css(css);
   };
 
+  AttachBody.prototype._resizeDropdown = function () {
+    this.$dropdownContainer.width();
+
+    this.$dropdown.css({
+      width: this.$container.outerWidth(false) + 'px'
+    });
+  };
+
   AttachBody.prototype._showDropdown = function (decorated) {
     this.$dropdownContainer.appendTo(this.$dropdownParent);
 
     this._positionDropdown();
+    this._resizeDropdown();
   };
 
   return AttachBody;
@@ -4378,7 +4388,7 @@ define('select2/options',[
     if ($e.data('ajax-url')) {
       if (console && console.warn) {
         console.warn(
-          'Select2: The `data-ajax-attribute` has been changed to ' +
+          'Select2: The `data-ajax-url` attribute has been changed to ' +
           '`data-ajax--url` and support for the old attribute will be removed' +
           ' in future versions of Select2.'
         );

docs/examples.html

@@ -243,6 +243,43 @@ $(".js-data-example-ajax").select2({
     </div>
   </section>
 
+  <section id="responsive" class="row">
+    <div class="col-md-4">
+      <h1>Responsive design - Percent width</h1>
+
+      <p>
+        Select2's width can be set to a percentage of its parent to support
+        responsive design. The two Select2 boxes below are styled to 50% and 75%
+        width respectively.
+      </p>
+
+      <p>
+        <select class="js-example-responsive js-states" style="width: 50%"></select>
+      </p>
+
+      <p>
+        <select class="js-example-responsive js-states" multiple="multiple" style="width: 75%"></select>
+      </p>
+    </div>
+    <div class="col-md-8">
+      <h2>Example code</h2>
+
+      <pre data-fill-from=".js-code-responsive"></pre>
+
+      <div class="alert alert-warning">
+        Select2 will do its best to resolve the percent width specified via a
+        css class, but it is not always possible. The best way to ensure that
+        Select2 is using a percent based width is to inline the
+        <code>style</code> declaration into the tag.
+      </div>
+
+<script type="text/x-example-code" class="js-code-responsive">
+<select class="js-example-responsive" style="width: 50%"></select>
+<select class="js-example-responsive" multiple="multiple" style="width: 75%"></select>
+</script>
+    </div>
+  </section>
+
   <section id="disabled" class="row">
     <div class="col-md-4">
       <h1>Disabled mode</h1>
@@ -943,6 +980,8 @@ $.fn.select2.amd.require(
   $(".js-example-disabled").select2();
   $(".js-example-disabled-multi").select2();
 
+  $(".js-example-responsive").select2();
+
   $disabledResults.select2();
 
   $(".js-example-programmatic").select2();

src/js/select2/dropdown/attachBody.js

@@ -23,10 +23,12 @@ define([
 
         container.on('results:all', function () {
           self._positionDropdown();
+          self._resizeDropdown();
         });
 
         container.on('results:append', function () {
           self._positionDropdown();
+          self._resizeDropdown();
         });
       }
     });
@@ -53,8 +55,6 @@ define([
       top: -999999
     });
 
-    $dropdown.width($container.outerWidth(false));
-
     this.$container = $container;
   };
 
@@ -83,6 +83,7 @@ define([
     $(window).on(scrollEvent + ' ' + resizeEvent + ' ' + orientationEvent,
       function (e) {
       self._positionDropdown();
+      self._resizeDropdown();
     });
   };
 
@@ -158,10 +159,19 @@ define([
     this.$dropdownContainer.css(css);
   };
 
+  AttachBody.prototype._resizeDropdown = function () {
+    this.$dropdownContainer.width();
+
+    this.$dropdown.css({
+      width: this.$container.outerWidth(false) + 'px'
+    });
+  };
+
   AttachBody.prototype._showDropdown = function (decorated) {
     this.$dropdownContainer.appendTo(this.$dropdownParent);
 
     this._positionDropdown();
+    this._resizeDropdown();
   };
 
   return AttachBody;

src/js/select2/options.js

@@ -61,7 +61,7 @@ define([
     if ($e.data('ajax-url')) {
       if (console && console.warn) {
         console.warn(
-          'Select2: The `data-ajax-url` has been changed to ' +
+          'Select2: The `data-ajax-url` attribute has been changed to ' +
           '`data-ajax--url` and support for the old attribute will be removed' +
           ' in future versions of Select2.'
         );