Selectlist: Auto sizing not working again #980 fix and typo fix

- label no longer center aligned...now left aligned. Caret now right aligned.

index.html

@@ -767,7 +767,7 @@ <h2 class="header">Year</h2>
 			<div class="col-xs-12 col-sm-10 col-md-10">
 				<div data-resize="auto" class="btn-group selectlist timezone">
 					<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
-						<span class="selected-label" style="width: 67px;">(GMT-06:00) Central Standard Time</span>
+						<span class="selected-label">(GMT-06:00) Central Standard Time</span>
 						<span class="caret"></span>
 						<span class="sr-only">Toggle Dropdown</span>
 					</button>

js/selectlist.js

@@ -107,23 +107,23 @@
 		resize: function() {
 			var width = 0;
 			var newWidth = 0;
-			var sizer = $('<div/>').addClass('selectlist-sizer selectlist');
-			var btnSizer = $('<div/>').addClass('button-sizer selectlist');
+			var sizer = $('<div/>').addClass('selectlist-sizer');
 
 
 			if( Boolean( $(document).find( 'html' ).hasClass( 'fuelux' ) ) ) {
 				// default behavior for fuel ux setup. means fuelux was a class on the html tag
-				$( document.body ).append( sizer).append(btnSizer);
+				$( document.body ).append( sizer);
 			} else {
 				// fuelux is not a class on the html tag. So we'll look for the first one we find so the correct styles get applied to the sizer
-				$( '.fuelux:first' ).append( sizer ).append(btnSizer);
+				$( '.fuelux:first' ).append( sizer );
 			}
 
 			sizer.append(this.$element.clone());
 
 			this.$element.find('a').each(function () {
 				sizer.find('.selected-label').text($(this).text());
-				newWidth = sizer.outerWidth();
+				newWidth = sizer.find('.selectlist').outerWidth();
+				newWidth = newWidth + sizer.find('.sr-only').outerWidth();
 				if(newWidth > width) {
 					width = newWidth;
 				}

less/misc.less

@@ -46,3 +46,18 @@ input, textarea {
 	position:absolute;
 	left:-9999px;
 }
+
+.button-sizer, .selectlist-sizer {
+	display: inline-block;
+	position: absolute;
+	visibility: hidden;
+	top: 0;
+	float: left;
+	.dropdown-menu {
+		display: block;
+		min-width: inherit;
+	}
+	.selected-label {
+		width: auto !important;
+	}
+}

less/mixins.less

@@ -113,9 +113,8 @@
 }
 
 .vertical-align() {
-	position: relative;
-	top: 50%;
-	-webkit-transform: translateY(-50%);
-	-ms-transform: translateY(-50%);
-	transform: translateY(-50%);
+	margin: auto;
+	position: absolute;
+	top: 0;
+	bottom: 0;
 }

less/selectlist.less

@@ -16,12 +16,11 @@
 		white-space: normal;
 
 		.selected-label {
-			padding-right: 10px;
+			padding-right: 18px;
 			float: left;
 		}
 		.caret {
 			.vertical-align();
-			position: absolute;
 			right: @btnPaddingHorizontal;
 		}
 	}