release 3.5.1

DETAILS.md

@@ -30,7 +30,7 @@ Fuel UX can be applied to a section of your your HTML or the entire page by addi
 ## Downloading code
 Fuel UX can be obtained in any of the following ways:
 
-* Request files from [the Fuel UX CDN](http://www.fuelcdn.com/fuelux/3.5.0/)
+* Request files from [the Fuel UX CDN](http://www.fuelcdn.com/fuelux/3.5.1/)
 * Using [Bower](https://github.com/bower/bower) (ensures you get all the [dependencies](#dependencies)):
 
    ```
@@ -53,7 +53,7 @@ Fuel UX can be obtained in any of the following ways:
 
    Cloning the repository ensures you can apply future updates to Fuel UX easily, but requires to you manage its [dependencies](#dependencies) on your own.
 
-* Download a .zip archive of the [latest release](http://www.fuelcdn.com/fuelux/3.5.0/fuelux.zip).
+* Download a .zip archive of the [latest release](http://www.fuelcdn.com/fuelux/3.5.1/fuelux.zip).
 
 ## AMD support
 
@@ -63,7 +63,7 @@ If using AMD (such as [RequireJS](http://requirejs.org)), reference the FuelUX d
 ```javascript
 require.config({
     paths: {
-        'fuelux': 'http://www.fuelcdn.com/fuelux/3.5.0/'
+        'fuelux': 'http://www.fuelcdn.com/fuelux/3.5.1/'
         //...
     }
 });

README.md

@@ -32,18 +32,18 @@ Add `fuelux` class to the portion of the page using Fuel UX as seen [here](https
 Ensure all the dependencies are included on the page (eg, such as using the CDN as shown below).
 ```
 <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
-<link href="//www.fuelcdn.com/fuelux/3.5.0/css/fuelux.min.css" rel="stylesheet">
+<link href="//www.fuelcdn.com/fuelux/3.5.1/css/fuelux.min.css" rel="stylesheet">
 
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
 <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.1/js/bootstrap.min.js"></script>
-<script src="//www.fuelcdn.com/fuelux/3.5.0/js/fuelux.min.js"></script>
+<script src="//www.fuelcdn.com/fuelux/3.5.1/js/fuelux.min.js"></script>
 
 ```
 
 ### Install
 A few ways available to install.
 
-- Request files from [the Fuel UX CDN](http://www.fuelcdn.com/fuelux/3.5.0/)
+- Request files from [the Fuel UX CDN](http://www.fuelcdn.com/fuelux/3.5.1/)
 - [Download the latest release](https://github.com/exacttarget/fuelux/archive/3.4.0.zip).
 - Clone the repo: `git clone https://github.com/exacttarget/fuelux.git`.
 - Install with [Bower](http://bower.io): `bower install fuelux`.

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "fuelux",
   "description": "Extending Bootstrap with additional lightweight JavaScript controls.",
-  "version": "3.5.0",
+  "version": "3.5.1",
   "keywords": [
     "application",
     "bootstrap",

dist/css/fuelux.min.css

@@ -1,5 +1,5 @@
 /*!
- * Fuel UX v3.5.0 
+ * Fuel UX v3.5.1 
  * Copyright 2012-2015 ExactTarget
  * Licensed under the BSD-3-Clause license ()
  */
@@ -599,6 +599,23 @@
   position: absolute;
   left: -9999px;
 }
+.fuelux .button-sizer,
+.fuelux .selectlist-sizer {
+  display: inline-block;
+  position: absolute;
+  visibility: hidden;
+  top: 0;
+  float: left;
+}
+.fuelux .button-sizer .dropdown-menu,
+.fuelux .selectlist-sizer .dropdown-menu {
+  display: block;
+  min-width: inherit;
+}
+.fuelux .button-sizer .selected-label,
+.fuelux .selectlist-sizer .selected-label {
+  width: auto !important;
+}
 .fuelux .pillbox {
   border: 1px solid #BBBBBB;
   border-radius: 4px;
@@ -1585,8 +1602,15 @@ END
   white-space: normal;
 }
 .fuelux .selectlist .btn.dropdown-toggle .selected-label {
-  padding-right: 10px;
-  text-align: left;
+  padding-right: 18px;
+  float: left;
+}
+.fuelux .selectlist .btn.dropdown-toggle .caret {
+  margin: auto;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 12px;
 }
 .fuelux .tree {
   border: 1px solid #999999;

dist/js/fuelux.js

@@ -1,5 +1,5 @@
 /*!
- * Fuel UX v3.5.0
+ * Fuel UX v3.5.1
  * Copyright 2012-2015 ExactTarget
  * Licensed under the BSD-3-Clause license ()
  */
@@ -2272,16 +2272,34 @@
 			},
 
 			resize: function() {
-				var width = this.$dropdownMenu.outerWidth();
+				var width = 0;
+				var newWidth = 0;
+				var sizer = $( '<div/>' ).addClass( 'selectlist-sizer' );
 
-				if ( this.$button.outerWidth() > width ) {
-					var btnWidth = this.$button.outerWidth();
-					this.$dropdownMenu.css( 'width', btnWidth );
+
+				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 );
 				} else {
-					this.$button.css( 'width', width );
-					this.$dropdownMenu.css( 'width', width );
+					// 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 );
 				}
 
+				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;
+					}
+				} );
+
+				this.$button.css( 'width', width );
+				this.$dropdownMenu.css( 'width', width );
+
+				sizer.remove();
 
 			},
 

package.json

@@ -76,7 +76,7 @@
     "test": "grunt travisci"
   },
   "title": "Fuel UX",
-  "version": "3.5.0",
+  "version": "3.5.1",
   "volo": {
     "baseDir": "lib",
     "dependencies": {