References #129 - Added fitOptionsMaxWidth option and set the default…

… to true, and upgraded the default SelectBoxIt disabled theme
gfranko · Mar 18, 2013 · 26a9438 · 26a9438
1 parent 85121c5
commit 26a9438
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 10 deletions.
diff --git a/demos/default.html b/demos/default.html
@@ -12,8 +12,8 @@
 <body>
 <form>
             <select name="test" rel="test" data-test="test" class="really">
-                <option value="" disabled>Select a Month</option>
-                <option value="January" disabled>January</option>
+                <option value="">Select a Month</option>
+                <option value="January">January</option>
                 <option value="February">February</option>
                 <option value="March">March</option>
                 <option value="April">April</option>
@@ -273,7 +273,7 @@
         </select>
 
             <select id="test2">
-                <option value="" disabled>Select a Month</option>
+                <option value="">Select a Month</option>
                 <option value="January" disabled>January</option>
                 <option value="February">February</option>
                 <option value="March">March</option>
@@ -325,7 +325,7 @@
 </form>
 
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
-<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
+<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
 <script src="../src/javascripts/jquery.selectBoxIt.js"></script>
 <script>
 jQuery(function($) {

diff --git a/src/javascripts/jquery.selectBoxIt.core.js b/src/javascripts/jquery.selectBoxIt.core.js
@@ -108,7 +108,10 @@
             "nativeMousedown": false,
 
             // **customShowHideEvent**: Prevents the drop down from opening on click or mousedown, which allows a user to open/close the drop down with a custom event handler.
-            "customShowHideEvent": false
+            "customShowHideEvent": false,
+
+            // **fitOptionsMaxWidth**: Makes sure the width of the drop down is enough to fit all of the drop down options
+            "fitOptionsMaxWidth": true
 
         },
 
@@ -314,7 +317,7 @@
             var self = this,
                 originalElemId = self.originalElem.id || "",
                 copyClasses = self.options["copyClasses"],
-                selectboxClasses = self.selectBox.attr("class");
+                selectboxClasses = self.selectBox.attr("class") || "";
 
             // Creates a dropdown element that contains the dropdown list text value
             self.dropdownText = $("<span/>", {
@@ -603,6 +606,16 @@
 
             }
 
+            if(self.options["fitOptionsMaxWidth"]) {
+
+                self.dropdown.css({
+
+                    "width": self.list.outerWidth(true) + self.downArrowContainer.outerWidth(true) + self.dropdownImage.outerWidth(true)
+
+                });
+
+            }
+
             // Dynamically adds the `max-width` and `line-height` CSS styles of the dropdown list text element
             self.dropdownText.css({
 

diff --git a/src/javascripts/jquery.selectBoxIt.js b/src/javascripts/jquery.selectBoxIt.js
@@ -108,7 +108,10 @@
             "nativeMousedown": false,
 
             // **customShowHideEvent**: Prevents the drop down from opening on click or mousedown, which allows a user to open/close the drop down with a custom event handler.
-            "customShowHideEvent": false
+            "customShowHideEvent": false,
+
+            // **fitOptionsMaxWidth**: Makes sure the width of the drop down is enough to fit all of the drop down options
+            "fitOptionsMaxWidth": true
 
         },
 
@@ -314,7 +317,7 @@
             var self = this,
                 originalElemId = self.originalElem.id || "",
                 copyClasses = self.options["copyClasses"],
-                selectboxClasses = self.selectBox.attr("class");
+                selectboxClasses = self.selectBox.attr("class") || "";
 
             // Creates a dropdown element that contains the dropdown list text value
             self.dropdownText = $("<span/>", {
@@ -603,6 +606,16 @@
 
             }
 
+            if(self.options["fitOptionsMaxWidth"]) {
+
+                self.dropdown.css({
+
+                    "width": self.list.outerWidth(true) + self.downArrowContainer.outerWidth(true) + self.dropdownImage.outerWidth(true)
+
+                });
+
+            }
+
             // Dynamically adds the `max-width` and `line-height` CSS styles of the dropdown list text element
             self.dropdownText.css({