fix(resize): autoAdjustDropWidthByTextSize should handle 100% width

- made some changes in the multiple-select.js lib to handle autoAdjustDropWidthByTextSize and width when is defined as 100%. If auto-adjust finds a width larger than drop width (also with 100%), it will then re-adjust, but if 100% is defined and is greater then it will stay as 100% width

aurelia-slickgrid/assets/lib/multiple-select/multiple-select.js

@@ -7,7 +7,7 @@
  * This is a modified version of multiple-select
  * @author Ghislain B.
  *
- * Few changes were applied to the original with addition of the following properties/changes:
+ * Some minor changes were applied to the original with the following changes:
  * - "okButton" boolean flag which when set will add an "OK" button at the end of the list to make it convenient to the user to close the window
  * - "okButtonText" was also added to change locale
  * - made code changes to support re-styling of the radio/checkbox with Font-Awesome or any other font
@@ -510,7 +510,7 @@
         this.filter();
       }
 
-      if (!this.options.autoDropWidth && this.options.autoAdjustDropWidthByTextSize) {
+      if (this.options.autoAdjustDropWidthByTextSize) {
         this.adjustDropWidthByText();
       } else if (!this.options.width && this.options.autoDropWidth) {
         this.$drop.css('width', this.$parent.width());
@@ -628,9 +628,10 @@
     },
 
     adjustDropWidthByText: function () {
-      // if the dropWidth or width is specified, we won't adjust anything here
+      // keep the dropWidth/width as reference, if our new calculated width is below then we will re-adjust (else do nothing)
+      var currentDefinedWidth = this.$parent.width();
       if (this.options.dropWidth || this.options.width) {
-        return;
+        currentDefinedWidth = this.options.dropWidth || this.options.width;
       }
 
       // calculate the "Select All" element width, this text is configurable which is why we recalculate every time
@@ -668,8 +669,10 @@
         maxDropWidth = selectParentWidth;
       }
 
-      // finally re-adjust the drop to the new calculated width
-      this.$drop.css({ 'width': maxDropWidth, 'max-width': maxDropWidth });
+      // finally re-adjust the drop to the new calculated width when necessary
+      if (maxDropWidth > currentDefinedWidth || currentDefinedWidth === '100%') {
+        this.$drop.css({ 'width': maxDropWidth, 'max-width': maxDropWidth });
+      }
     },
 
     availableSpaceBottom: function () {

aurelia-slickgrid/src/aurelia-slickgrid/models/multipleSelectOption.interface.ts

@@ -35,6 +35,15 @@ export interface MultipleSelectOption {
   /** Display selected values on the element. By default this option is set to false. */
   displayValues?: boolean;
 
+  /** Defaults to 26 (as per CSS), that is the "OK" button element height in pixels inside the drop when using multiple-selection */
+  domElmOkButtonHeight?: number;
+
+  /** Defaults to 26 (as per CSS), that is the select DOM element padding in pixels (that is not the drop but the select itself, how tall is it) */
+  domElmSelectSidePadding?: number;
+
+  /** Defaults to 39 (as per CSS), that is the DOM element of the "Select All" text area */
+  domElmSelectAllHeight?: number;
+
   /** Define the width of the dropdown list */
   dropWidth?: number;
 
@@ -110,6 +119,12 @@ export interface MultipleSelectOption {
   /** Defaults to false, when set to True it will use the "title" that were defined in each select option */
   useSelectOptionTitle?: boolean;
 
+  /** Defaults to False, when set to True it will use the <option label=""> that can be used to display selected options */
+  useSelectOptionLabel?: boolean;
+
+  /** Defaults to False, same as "useSelectOptionLabel" but will also render html */
+  useSelectOptionLabelToHtml?: boolean;
+
   /** Define the width property of the dropdown list, support a percentage setting.By default this option is set to undefined. Which is the same as the select input field. */
   width?: number | string;