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

- label no longer center aligned...now left aligned. Caret now right aligned.
ExactTarget · Jan 20, 2015 · d03ffcf · d03ffcf
1 parent 5497e31
commit d03ffcf
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 28 deletions.
diff --git 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/js/selectlist.js b/js/selectlist.js
@@ -105,6 +105,8 @@
 		},
 
 		resize: function() {
+			var width = 0;
+			var newWidth = 0;
 			var sizer = $('<div/>').addClass('selectlist-sizer selectlist');
 			var btnSizer = $('<div/>').addClass('button-sizer selectlist');
 
@@ -117,22 +119,20 @@
 				$( '.fuelux:first' ).append( sizer ).append(btnSizer);
 			}
 
-			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.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
@@ -46,15 +46,3 @@ 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;
-	}
-}
diff --git a/less/mixins.less b/less/mixins.less
@@ -110,4 +110,12 @@
 	a&:hover {
 		color: darken(@color, 10%);
 	}
+}
+
+.vertical-align() {
+	position: relative;
+	top: 50%;
+	-webkit-transform: translateY(-50%);
+	-ms-transform: translateY(-50%);
+	transform: translateY(-50%);
 }
diff --git a/less/selectlist.less b/less/selectlist.less
@@ -12,13 +12,17 @@
 	.dropdown-menu {
 		min-width: inherit;
 	}
-
 	.btn.dropdown-toggle {
 		white-space: normal;
 
 		.selected-label {
 			padding-right: 10px;
-			text-align: left;
+			float: left;
+		}
+		.caret {
+			.vertical-align();
+			position: absolute;
+			right: @btnPaddingHorizontal;
 		}
 	}
 }
diff --git a/less/variables.less b/less/variables.less
@@ -121,6 +121,9 @@
 @btnInverseBackground:              #444;
 @btnInverseBackgroundHighlight:     @grayDarker;
 
+@btnPaddingVertical:                6px;
+@btnPaddingHorizontal:              12px;
+
 
 // Forms
 // -------------------------