Permalink
Browse files

Selectmenu: Properly set width for button

Fixes #10145
Closes gh-1296
  • Loading branch information...
scottgonzalez committed Jul 29, 2014
1 parent d1e327c commit 45e13ed208b3533e91d008789d61e5138501428a
Showing with 26 additions and 8 deletions.
  1. +10 −2 tests/unit/selectmenu/selectmenu_options.js
  2. +16 −6 ui/selectmenu.js
@@ -86,8 +86,8 @@ test( "CSS styles", function() {
});
-test( "Width", function() {
- expect( 8 );
+test( "width", function() {
+ expect( 9 );
var button, menu,
element = $( "#speed" );
@@ -124,6 +124,14 @@ test( "Width", function() {
equal( button.outerWidth(), element.outerWidth(), "button width with long option" );
element.selectmenu( "open" );
ok( menu.outerWidth() >= element.outerWidth(), "menu width with long option" );
+
+ element.parent().outerWidth( 300 );
+ element
+ .selectmenu( "destroy" )
+ .css( "width", "100%" )
+ .selectmenu();
+ button = element.selectmenu( "widget" );
+ equal( button.outerWidth(), 300, "button width fills container" );
});
})( jQuery );
View
@@ -106,7 +106,7 @@ return $.widget( "ui.selectmenu", {
.appendTo( this.button );
this._setText( this.buttonText, this.element.find( "option:selected" ).text() );
- this._setOption( "width", this.options.width );
+ this._resizeButton();
this._on( this.button, this._buttonEvents );
this.button.one( "focusin", function() {
@@ -186,7 +186,9 @@ return $.widget( "ui.selectmenu", {
refresh: function() {
this._refreshMenu();
this._setText( this.buttonText, this._getSelectedItem().text() );
- this._setOption( "width", this.options.width );
+ if ( !this.options.width ) {
+ this._resizeButton();
+ }
},
_refreshMenu: function() {
@@ -475,10 +477,7 @@ return $.widget( "ui.selectmenu", {
}
if ( key === "width" ) {
- if ( !value ) {
- value = this.element.outerWidth();
- }
- this.button.outerWidth( value );
+ this._resizeButton();
}
},
@@ -511,6 +510,17 @@ return $.widget( "ui.selectmenu", {
this.menu.attr( "aria-hidden", !this.isOpen );
},
+ _resizeButton: function() {
+ var width = this.options.width;
+
+ if ( !width ) {
+ width = this.element.show().outerWidth();
+ this.element.hide();
+ }
+
+ this.button.outerWidth( width );
+ },
+
_resizeMenu: function() {
this.menu.outerWidth( Math.max(
this.button.outerWidth(),

0 comments on commit 45e13ed

Please sign in to comment.