v1.1.0

Removed autoWidth option; control now inherits the size of the original select element

Author: claviska

README

@@ -2,8 +2,8 @@ jQuery selectBox
 
 	A cosmetic, styleable replacement for SELECT elements.
 
-	Homepage:   http://abeautifulsite.net/blog/2011/01/jquery-selectbox-plugin/
-	Demo:  http://labs.abeautifulsite.dev/jquery-selectBox/
+	Homepage:  http://abeautifulsite.net/blog/2011/01/jquery-selectbox-plugin/
+	Demo:      http://labs.abeautifulsite.dev/jquery-selectBox/
 
 	Copyright 2012 Cory LaViska for A Beautiful Site, LLC.
 
@@ -17,7 +17,7 @@ Features:
 	- Shift + click (or shift + enter) to select a range of options in multi-select controls
 	- Type to search when the control has focus
 	- Auto-height based on the size attribute (to use, omit the height property in your CSS!)
-	- Tested in IE7-IE9, Firefox 3-4, recent webkit browsers, and Opera
+	- Tested in IE7-IE9, Firefox 3-4, recent WebKit browsers, and Opera
 
 
 License:
@@ -103,6 +103,7 @@ Change Log:
 	                    - Fixed meta/ctrl key issue (#41)
 	                    - Expanded iOS/Android check to include Windows 7 Phone and BlackBerry
 	v1.0.9 (2012-01-04) - Dropdown label class now syncs with selected option's class(es)
+	v1.1.0 (2012-01-06) - Removed autowidth option; control now inherits the size of the original select element
 
 
 Known Issues:

index.html

@@ -142,10 +142,10 @@ <h1>$("SELECT").selectBox();</h1>
 
 	    	<p>
 	    		<label for="standard-dropdown">Standard Dropdown</label><br />
-		    	<select id="standard-dropdown" name="standard-dropdown" class="custom-class1 custom-class2">
+		    	<select id="standard-dropdown" name="standard-dropdown" class="custom-class1 custom-class2" style="width: 200px;">
 		    		<option value="1" class="test-class-1">Item 1</option>
 		    		<option value="2" class="test-class-2" selected="selected">Item 2</option>
-		    		<option value="3" class="test-class-3">Item 3 has &lt;a&gt; really long label but it won't affect the control's display at all</option>
+		    		<option value="3" class="test-class-3">Item 3 has a really long label that will not interfere with the control’s width</option>
 		    		<option value="4" class="test-class-4">Item 4</option>
 		    		<option value="5" disabled="disabled">Item 5 (disabled)</option>
 		    		<option value="6">Item 6</option>

jquery.selectBox.css

@@ -1,7 +1,6 @@
 /* Dropdown control */
 .selectBox-dropdown {
-	width: 210px; /* width = (desired width) - padding-right */
-	padding-right: 40px;
+	min-width: 75px;
 	position: relative;
 	border: solid 1px #BBB;
 	line-height: 1.5;
@@ -38,8 +37,7 @@
 }
 
 .selectBox-dropdown .selectBox-label {
-	width: 100%;
-	padding: .2em .3em;
+	padding: 2px 8px;
 	display: inline-block;
 	white-space: nowrap;
 	overflow: hidden;
@@ -72,7 +70,7 @@
 
 /* Inline control */
 .selectBox-inline {
-	width: 250px;
+	min-width: 75px;
 	outline: none;
 	border: solid 1px #BBB;
 	background: #FFF;

jquery.selectBox.js

@@ -39,12 +39,10 @@ if(jQuery) (function($) {
 					inline = select.attr('multiple') || parseInt(select.attr('size')) > 1;
 
 				var settings = data || {};
-				if( settings.autoWidth === undefined ) settings.autoWidth = true;
-
-				// Inherit class names, style, and title attributes
+				
 				control
+					.width(select.outerWidth())
 					.addClass(select.attr('class'))
-					.attr('style', select.attr('style') || '')
 					.attr('title', select.attr('title') || '')
 					.attr('tabindex', parseInt(select.attr('tabindex')))
 					.css('display', 'inline-block')
@@ -133,7 +131,9 @@ if(jQuery) (function($) {
 						arrow = $('<span class="selectBox-arrow" />');
 
 					// Update label
-					label.attr('class', getLabelClass(select)).text(getLabelText(select));
+					label
+						.attr('class', getLabelClass(select))
+						.text(getLabelText(select));
 
 					options = getOptions(select, 'dropdown');
 					options.appendTo('BODY');
@@ -160,9 +160,13 @@ if(jQuery) (function($) {
 							handleKeyPress(select, event);
 						})
 						.insertAfter(select);
-
+					
+					// Set label width
+					var labelWidth = control.width() - arrow.outerWidth() - parseInt(label.css('paddingLeft')) - parseInt(label.css('paddingLeft'));
+					label.width(labelWidth);
+					
 					disableSelection(control);
-
+					
 				}
 
 				// Store data for later use and show the control
@@ -343,18 +347,15 @@ if(jQuery) (function($) {
 
 				hideMenus();
 
-				// Auto-width
-				if( settings.autoWidth ) options.css('width', control.innerWidth());
-				if(options.innerWidth() < control.innerWidth()) {
-					options.css('width', control.innerWidth() - parseInt(options.css('padding-left')) - parseInt(options.css('padding-right')));
-				}
-
 				var borderBottomWidth = isNaN(control.css('borderBottomWidth')) ? 0 : parseInt(control.css('borderBottomWidth'));
+				
 				// Menu position
-				options.css({
-					top: control.offset().top + control.outerHeight() - borderBottomWidth,
-					left: control.offset().left
-				});
+				options
+					.width(control.innerWidth())
+					.css({
+						top: control.offset().top + control.outerHeight() - borderBottomWidth,
+						left: control.offset().left
+					});
 
 				// Show menu
 				switch( settings.menuTransition ) {