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

dev/dev.html

@@ -331,7 +331,7 @@
 			});
 		})();
 		require(['jquery', '../data','underscore', 'fuelux/all'], function($, data,_) {
-			$('#triggerModal').modal('show');
+//			$('#triggerModal').modal('show');
 
 			$('.card').on('click', function () {
 				$('.card').removeClass('active');
@@ -346,6 +346,54 @@
 <!--%Name:Trigger Modal-->
 <!--%Description:Trigger modal standard UI.-->
 <!--%Type:Standard UI-->
+<div class="container">
+<div class="row">
+	<div class="col-md-12">
+		<div class="btn-group selectlist" data-resize="auto" data-initialize="selectlist" id="mySelectlist">
+			<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
+				<span class="selected-label"></span>
+				<span class="caret"></span>
+				<span class="sr-only">Toggle Dropdown</span>
+			</button>
+			<ul class="dropdown-menu" role="menu">
+				<li data-value="1"><a href="#">One Two Three</a></li>
+				<li data-value="1"><a href="#">One Two</a></li>
+				<li data-value="1" data-selected="true"><a href="#">One</a></li>
+			</ul>
+			<input class="hidden hidden-field" name="mySelectlist" readonly="readonly" aria-hidden="true" type="text"/>
+		</div>
+
+
+
+		<div style="width: 100px">
+	<div class="input-group input-append dropdown combobox" data-resize="auto" data-initialize="combobox" id="myCombobox">
+		<input type="text" class="form-control">
+		<div class="input-group-btn">
+
+			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
+			<ul class="dropdown-menu dropdown-menu-right">
+				<li data-value="1"><a href="#">One Two Three</a></li>
+				<li data-value="1"><a href="#">One Two</a></li>
+				<li data-value="1" data-selected="true"><a href="#">One</a></li>
+			</ul>
+		</div>
+	</div>
+
+</div>
+		<div>
+			<div class="input-group input-append dropdown combobox" data-resize="auto" data-initialize="combobox" id="myCombobox">
+				<input type="text" class="form-control">
+				<div class="input-group-btn">
+					<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
+					<ul class="dropdown-menu dropdown-menu-right">
+						<li data-value="1" data-selected="true"><a href="#">One Two Three</a></li>
+						<li data-value="1"><a href="#">One Two</a></li>
+						<li data-value="1"><a href="#">One</a></li>
+					</ul>
+				</div>
+			</div>
+
+		</div>
 
 
 
@@ -1384,7 +1432,9 @@ <h5 class="title text-adjust">Loyal Customer</h5>
 		</div><!-- /.modal-content -->
 	</div><!-- /.modal-dialog -->
 </div><!-- /.modal -->
-
+	</div>
+</div>
+</div>
 </body>
 </html>
 </html>

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

@@ -105,34 +105,34 @@
 		},
 
 		resize: function() {
-			var sizer = $('<div/>').addClass('selectlist-sizer selectlist');
-			var btnSizer = $('<div/>').addClass('button-sizer selectlist');
+			var width = 0;
+			var newWidth = 0;
+			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 );
 			}
 
-			btnSizer.append(this.$button.clone());
-			sizer.append(this.$dropdownMenu.clone());
+			sizer.append(this.$element.clone());
 
+			this.$element.find('a').each(function () {
+				sizer.find('.selected-label').text($(this).text());
+				newWidth = sizer.find('.selectlist').outerWidth();
+				newWidth = newWidth + sizer.find('.sr-only').outerWidth();
+				if(newWidth > width) {
+					width = newWidth;
+				}
+			});
 
-			var btnWidth = btnSizer.outerWidth();
-			var width = sizer.find('.dropdown-menu').outerWidth();
+			this.$button.css('width', width);
+			this.$dropdownMenu.css('width', width);
 
-			if (btnWidth > width){
-				this.$dropdownMenu.css('width', btnWidth);
-			}
-			else {
-				this.$button.css('width', width);
-				this.$dropdownMenu.css('width', width);
-			}
 			sizer.remove();
-			btnSizer.remove();
 
 		},
 

less/misc.less

@@ -57,4 +57,7 @@ input, textarea {
 		display: block;
 		min-width: inherit;
 	}
+	.selected-label {
+		width: auto !important;
+	}
 }

less/mixins.less

@@ -110,4 +110,11 @@
 	a&:hover {
 		color: darken(@color, 10%);
 	}
+}
+
+.vertical-align() {
+	margin: auto;
+	position: absolute;
+	top: 0;
+	bottom: 0;
 }

less/selectlist.less

@@ -12,13 +12,16 @@
 	.dropdown-menu {
 		min-width: inherit;
 	}
-
 	.btn.dropdown-toggle {
 		white-space: normal;
 
 		.selected-label {
-			padding-right: 10px;
-			text-align: left;
+			padding-right: 18px;
+			float: left;
+		}
+		.caret {
+			.vertical-align();
+			right: @btnPaddingHorizontal;
 		}
 	}
 }

less/variables.less

@@ -121,6 +121,9 @@
 @btnInverseBackground:              #444;
 @btnInverseBackgroundHighlight:     @grayDarker;
 
+@btnPaddingVertical:                6px;
+@btnPaddingHorizontal:              12px;
+
 
 // Forms
 // -------------------------