Permalink
Browse files

Selectmenu: Support `width: false` and default to 14em

`width: null` still matches the width of the original element.
`width: false` prevents an inline style from being set for the width. This
makes it easy to set the width via a stylesheet and allows the use of any
unit for setting the width, such as the new default of `14em`.

Fixes #11198
Closes gh-1467
  • Loading branch information...
scottgonzalez committed Mar 4, 2015
1 parent 47a32fb commit af4c35df9d1cf4c15d57b3789711026360785831
@@ -59,9 +59,6 @@
label {
display: block;
}
select {
width: 200px;
}
/* select with custom icons */
.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item-wrapper {
@@ -32,9 +32,6 @@
display: block;
margin: 30px 0 0 0;
}
select {
width: 200px;
}
.overflow {
height: 200px;
}
@@ -41,9 +41,6 @@
display: block;
margin: 20px 0 0 0;
}
select {
width: 200px;
}
#circle {
float: left;
@@ -10,7 +10,7 @@ TestHelpers.commonWidgetTests( "selectmenu", {
at: "left bottom",
collision: "none"
},
width: null,
width: false,
// callbacks
change: null,
@@ -85,14 +85,17 @@ test( "CSS styles", function() {
});
test( "width", function() {
expect( 5 );
expect( 6 );
var button,
element = $( "#speed" );
element.selectmenu();
button = element.selectmenu( "widget" );
equal( button[ 0 ].style.width, "", "no inline style" );
element.selectmenu( "option", "width", null );
equal( button.outerWidth(), element.outerWidth(), "button width auto" );
element.outerWidth( 100 );
@@ -107,15 +110,15 @@ test( "width", function() {
element
.append( $( "<option>", { text: "Option with a little longer text" } ) )
.selectmenu( "option", "width", "" )
.selectmenu( "option", "width", null )
.selectmenu( "refresh" );
equal( button.outerWidth(), element.outerWidth(), "button width with long option" );
element.parent().outerWidth( 300 );
element
.selectmenu( "destroy" )
.css( "width", "100%" )
.selectmenu();
.selectmenu({ width: null });
button = element.selectmenu( "widget" );
equal( button.outerWidth(), 300, "button width fills container" );
});
@@ -39,6 +39,7 @@
position: relative;
text-decoration: none;
cursor: pointer;
width: 14em;
}
.ui-selectmenu-button span.ui-icon {
right: 0.5em;
View
@@ -48,7 +48,7 @@ return $.widget( "ui.selectmenu", {
at: "left bottom",
collision: "none"
},
width: null,
width: false,
// callbacks
change: null,
@@ -118,7 +118,9 @@ return $.widget( "ui.selectmenu", {
this.buttonItem = this._renderButtonItem( item )
.appendTo( this.button );
this._resizeButton();
if ( this.options.width !== false ) {
this._resizeButton();
}
this._on( this.button, this._buttonEvents );
this.button.one( "focusin", function() {
@@ -210,7 +212,7 @@ return $.widget( "ui.selectmenu", {
this._getSelectedItem().data( "ui-selectmenu-item" ) || {}
)
);
if ( !this.options.width ) {
if ( this.options.width === null ) {
this._resizeButton();
}
},
@@ -603,7 +605,14 @@ return $.widget( "ui.selectmenu", {
_resizeButton: function() {
var width = this.options.width;
if ( !width ) {
// For `width: false`, just remove inline style and stop
if ( width === false ) {
this.button.css( "width", "" );
return;
}
// For `width: null`, match the width of the original element
if ( width === null ) {
width = this.element.show().outerWidth();
this.element.hide();
}

0 comments on commit af4c35d

Please sign in to comment.