Add width option (issue 9); fix issue 10

Author: Tom Doan

README.md

@@ -54,16 +54,17 @@ $(document).ready(function() {
 
 ## Options
 
-Name                | Type     | Default      | Description
-------------------- | -------- | ------------ | -----------
-`classic`           | boolean  | false        | The default behavior is to move the selected item to the top. If you want the order of items to remain static, then set this to `true`.
-`customClass`       | string   | arrow        | The class name to customize the drop-down menu style. The default `arrow` class displays a chevron-type arrow icon. Two additional helper classes are built in (add either or both to `arrow`): `triangle` converts the chevron into a solid triangle; `small` renders the arrow icon at half size.
-`height`            | number   | 50           | The drop-down menu item height. The minimum value is 8. Note that the maximum number of items displayed when the menu is opened is determined by the `size` attribute of the `<select>` element.
-`hoverIntent`       | number   | 200          | The wait period (in milliseconds) before collapsing the drop-down menu after you hover off of it. If you hover back onto the menu within the wait period, it will remain open. The minimum value is 0.
-`multiDelimiter`    | string   | ;            | The separator character to use for the list of selected items in a multi-select menu.
-`multiVerbosity`    | number   | 99           | The maximum number of selected items to display in a multi-select menu before replacing it with a summary (e.g., "2/3 selected"). To display "0/3 selected" instead of "None selected", set this option to -1.
-`selectedMarker`    | string   | **&#10003;** | The icon or symbol to mark that an item is selected. HTML is accepted (e.g., `<i class="fa fa-check"></i>`).
-`afterLoad`         | function |              | Callback function to execute after the drop-down menu widget is loaded.
+Name                | Type             | Default      | Description
+------------------- | ---------------- | ------------ | -----------
+`classic`           | boolean          | false        | The default behavior is to move the selected item to the top. If you want the order of items to remain static, then set this to `true`.
+`customClass`       | string           | arrow        | Class name to customize the drop-down menu style. The default `arrow` class displays a chevron-type arrow icon. Two additional helper classes are built in (add either or both to `arrow`): `triangle` converts the chevron into a solid triangle; `small` renders the arrow icon at half size.
+`width`             | number or string | null         | Drop-down menu width in pixels or percentage. Use a number for pixels or a string for percentage. By default, the width scales to fit the longest item in the drop-down menu.
+`height`            | number           | 50           | Drop-down menu height in pixels. The minimum value is 8. Note that the maximum number of items displayed when the menu is opened is determined by the `size` attribute of the `<select>` element.
+`hoverIntent`       | number           | 200          | Wait period (in milliseconds) before collapsing the drop-down menu after you hover off of it. If you hover back onto the menu within the wait period, it will remain open. The minimum value is 0.
+`multiDelimiter`    | string           | ;            | Separator character to use for the list of selected items in a multi-select menu.
+`multiVerbosity`    | number           | 99           | Maximum number of selected items to display in a multi-select menu before replacing it with a summary (e.g., "2/3 selected"). To display "0/3 selected" instead of "None selected", set this option to -1.
+`selectedMarker`    | string           | **&#10003;** | Icon or symbol to mark that an item is selected. HTML is accepted (e.g., `<i class="fa fa-check"></i>`).
+`afterLoad`         | function         |              | Callback function to execute after the drop-down menu widget is loaded.
 
 ## Methods
 

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "pretty-dropdowns",
   "description": "A simple, lightweight jQuery plugin to create stylized drop-down menus.",
-  "version": "4.12.2",
+  "version": "4.13.0",
   "main": [
     "dist/css/prettydropdowns.css",
     "dist/js/jquery.prettydropdowns.js"

dist/js/jquery.prettydropdowns.js

@@ -1,5 +1,5 @@
 /*!
- * jQuery Pretty Dropdowns Plugin v4.12.2 by T. H. Doan (https://thdoan.github.io/pretty-dropdowns/)
+ * jQuery Pretty Dropdowns Plugin v4.13.0 by T. H. Doan (https://thdoan.github.io/pretty-dropdowns/)
  *
  * jQuery Pretty Dropdowns by T. H. Doan is licensed under the MIT License.
  * Read a copy of the license in the LICENSE file or at https://choosealicense.com/licenses/mit/
@@ -12,6 +12,7 @@
     oOptions = $.extend({
       classic: false,
       customClass: 'arrow',
+      width: null,
       height: 50,
       hoverIntent: 200,
       multiDelimiter: '; ',
@@ -22,7 +23,9 @@
 
     oOptions.selectedMarker = '<span aria-hidden="true" class="checked"> ' + oOptions.selectedMarker + '</span>';
     // Validate options
-    if (isNaN(oOptions.height) || oOptions.height<8) oOptions.height = 8;
+    if (isNaN(oOptions.width) && !/^\d+%$/.test(oOptions.width)) oOptions.width = null;
+    if (isNaN(oOptions.height)) oOptions.height = 50;
+    else if (oOptions.height<8) oOptions.height = 8;
     if (isNaN(oOptions.hoverIntent) || oOptions.hoverIntent<0) oOptions.hoverIntent = 200;
     if (isNaN(oOptions.multiVerbosity)) oOptions.multiVerbosity = 99;
 
@@ -137,7 +140,13 @@
         // Set dropdown width and event handler
         // NOTE: Setting width using width(), then css() because width() only can return a float,
         // which can result in a missing right border when there is a scrollbar.
-        $items.width(nWidth).css('width', $items.css('width')).click(function() {
+        $items.width(nWidth).css('width', $items.css('width'));
+        if (oOptions.width) {
+          $dropdown.parent().css('min-width', $items.css('width'));
+          $dropdown.css('width', '100%');
+          $items.css('width', '100%');
+        }
+        $items.click(function() {
           var $li = $(this),
             $selected = $dropdown.children('.selected');
           // Ignore disabled menu
@@ -230,7 +239,7 @@
         // Put focus on menu when user clicks on label
         if (sLabelId) $('#' + sLabelId).off('click', handleFocus).click(handleFocus);
         // Done with everything!
-        $dropdown.parent().width(nOuterWidth||$dropdown.outerWidth(true)).removeClass('loading');
+        $dropdown.parent().width(oOptions.width||nOuterWidth||$dropdown.outerWidth(true)).removeClass('loading');
         oOptions.afterLoad();
       },
 
@@ -386,7 +395,7 @@
         ++nCount;
         return '<li id="item' + nTimestamp + '-' + nCount + '"'
           + (sGroup ? ' data-group="' + sGroup + '"' : '')
-          + (elOpt && elOpt.value ? ' data-value="' + elOpt.value + '"' : '')
+          + (elOpt && (elOpt.value||oOptions.classic) ? ' data-value="' + elOpt.value + '"' : '')
           + (elOpt && elOpt.nodeName==='OPTION' ? ' role="option"' : '')
           + (sTitle ? ' title="' + sTitle + '" aria-label="' + sTitle + '"' : '')
           + (sClass ? ' class="' + $.trim(sClass) + '"' : '')

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pretty-dropdowns",
-  "version": "4.12.2",
+  "version": "4.13.0",
   "description": "A simple, lightweight jQuery plugin to create stylized drop-down menus.",
   "keywords": [
     "jquery-plugin",