Re: #209 - Fixing SelectBoxIt width of hidden select box

gfranko · Oct 4, 2013 · 8d9c624 · 8d9c624
1 parent 0283d31
commit 8d9c624
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 9 deletions.
diff --git a/index.html b/index.html
@@ -374,7 +374,7 @@
 
   //var select = $("select").selectBoxIt({ populate: '<option value="test">test</option>' }).data('selectBox-selectBoxIt').remove(0);
 
-  $('select').selectBoxIt({ defaultText: 'Testing' });
+  $('select').selectBoxIt({ defaultText: 'Testing', autoWidth: false });
 
   $('form').removeClass('hidden');
 

diff --git a/src/javascripts/jquery.selectBoxIt.core.js b/src/javascripts/jquery.selectBoxIt.core.js
@@ -246,7 +246,8 @@
         _create: function(internal) {
 
             var self = this,
-                populateOption = self.options["populate"];
+                populateOption = self.options["populate"],
+                userTheme = self.options["theme"];
 
             // If the element calling SelectBoxIt is not a select box or is not visible
             if(!self.element.is("select")) {
@@ -280,7 +281,7 @@
             // The html document height
             self.documentHeight = $(document).height();
 
-            self.theme = self.getThemes()[self.options["theme"]] || self.getThemes()["default"];
+            self.theme = $.isPlainObject(userTheme) ? $.extend({}, self.getThemes()["default"], userTheme) : self.getThemes()[userTheme] ? self.getThemes()[userTheme] : self.getThemes()["default"];
 
             // The index of the currently selected dropdown list option
             self.currentFocus = 0;
@@ -1740,6 +1741,38 @@
 
             return self;
 
+        },
+
+        // _realOuterWidth
+        // ---------------
+        //      Retrieves the true outerWidth dimensions of a hidden DOM element
+        _realOuterWidth: function(elem) {
+
+            if(elem.is(":visible")) {
+
+                return elem.outerWidth(true);
+
+            }
+
+            var self = this,
+                clonedElem = elem.clone(),
+                outerWidth;
+
+            clonedElem.css({
+
+                "visibility": "hidden",
+
+                "display": "block",
+
+                "position": "absolute"
+
+            }).appendTo("body");
+
+            outerWidth = clonedElem.outerWidth(true);
+
+            clonedElem.remove();
+
+            return outerWidth;
         }
 
     });

diff --git a/src/javascripts/jquery.selectBoxIt.js b/src/javascripts/jquery.selectBoxIt.js
@@ -246,7 +246,8 @@
         _create: function(internal) {
 
             var self = this,
-                populateOption = self.options["populate"];
+                populateOption = self.options["populate"],
+                userTheme = self.options["theme"];
 
             // If the element calling SelectBoxIt is not a select box or is not visible
             if(!self.element.is("select")) {
@@ -280,7 +281,7 @@
             // The html document height
             self.documentHeight = $(document).height();
 
-            self.theme = self.getThemes()[self.options["theme"]] || self.getThemes()["default"];
+            self.theme = $.isPlainObject(userTheme) ? $.extend({}, self.getThemes()["default"], userTheme) : self.getThemes()[userTheme] ? self.getThemes()[userTheme] : self.getThemes()["default"];
 
             // The index of the currently selected dropdown list option
             self.currentFocus = 0;
@@ -1740,6 +1741,38 @@
 
             return self;
 
+        },
+
+        // _realOuterWidth
+        // ---------------
+        //      Retrieves the true outerWidth dimensions of a hidden DOM element
+        _realOuterWidth: function(elem) {
+
+            if(elem.is(":visible")) {
+
+                return elem.outerWidth(true);
+
+            }
+
+            var self = this,
+                clonedElem = elem.clone(),
+                outerWidth;
+
+            clonedElem.css({
+
+                "visibility": "hidden",
+
+                "display": "block",
+
+                "position": "absolute"
+
+            }).appendTo("body");
+
+            outerWidth = clonedElem.outerWidth(true);
+
+            clonedElem.remove();
+
+            return outerWidth;
         }
 
     });
@@ -2889,7 +2922,7 @@ selectBoxIt._destroySelectBoxIt = function() {
 
             "visibility": "visible",
 
-            "width": self.dropdown.outerWidth(),
+            "width": self._realOuterWidth(self.dropdown),
 
             "height": self.dropdown.outerHeight(),
 

diff --git a/src/javascripts/jquery.selectBoxIt.min.js b/src/javascripts/jquery.selectBoxIt.min.js
diff --git a/src/javascripts/jquery.selectBoxIt.mobile.js b/src/javascripts/jquery.selectBoxIt.mobile.js
@@ -50,7 +50,7 @@
 
             "visibility": "visible",
 
-            "width": self.dropdown.outerWidth(),
+            "width": self._realOuterWidth(self.dropdown),
 
             "height": self.dropdown.outerHeight(),