From 28489d38929fe82a1d1e357ceb274c38debeec88 Mon Sep 17 00:00:00 2001
From: benjaminneildavis <bndavis3@gmail.com>
Date: Tue, 20 Jan 2015 14:59:53 -0500
Subject: [PATCH] Selectlist: Auto sizing not working again #980 fix and typo
 fix - label no longer center aligned...now left aligned. Caret now right
 aligned.

- label no longer center aligned...now left aligned. Caret now right aligned.
---
 dev/dev.html         | 54 ++++++++++++++++++++++++++++++++++++++++++--
 index.html           |  2 +-
 js/selectlist.js     | 32 +++++++++++++-------------
 less/misc.less       |  3 +++
 less/mixins.less     |  7 ++++++
 less/selectlist.less |  9 +++++---
 less/variables.less  |  3 +++
 7 files changed, 88 insertions(+), 22 deletions(-)

diff --git a/dev/dev.html b/dev/dev.html
index 3513a6597..7fba40f44 100644
--- a/dev/dev.html
+++ b/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>
diff --git a/index.html b/index.html
index 681c4e987..9b69ccd99 100644
--- a/index.html
+++ b/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>
diff --git a/js/selectlist.js b/js/selectlist.js
index b4e67f0f3..26525de05 100644
--- a/js/selectlist.js
+++ b/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();
 
 		},
 
diff --git a/less/misc.less b/less/misc.less
index cfc903dee..098cbb7e1 100644
--- a/less/misc.less
+++ b/less/misc.less
@@ -57,4 +57,7 @@ input, textarea {
 		display: block;
 		min-width: inherit;
 	}
+	.selected-label {
+		width: auto !important;
+	}
 }
\ No newline at end of file
diff --git a/less/mixins.less b/less/mixins.less
index 51a92d873..09b8f26a9 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -110,4 +110,11 @@
 	a&:hover {
 		color: darken(@color, 10%);
 	}
+}
+
+.vertical-align() {
+	margin: auto;
+	position: absolute;
+	top: 0;
+	bottom: 0;
 }
\ No newline at end of file
diff --git a/less/selectlist.less b/less/selectlist.less
index 7e049c463..2b8a583e8 100644
--- a/less/selectlist.less
+++ b/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;
 		}
 	}
 }
\ No newline at end of file
diff --git a/less/variables.less b/less/variables.less
index 61fedc9b6..382648827 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -121,6 +121,9 @@
 @btnInverseBackground:              #444;
 @btnInverseBackgroundHighlight:     @grayDarker;
 
+@btnPaddingVertical:                6px;
+@btnPaddingHorizontal:              12px;
+
 
 // Forms
 // -------------------------