diff --git a/css/structure/jquery.mobile.controlgroup.css b/css/structure/jquery.mobile.controlgroup.css index 12bd0ec72d9..0c9ab25404f 100644 --- a/css/structure/jquery.mobile.controlgroup.css +++ b/css/structure/jquery.mobile.controlgroup.css @@ -8,6 +8,19 @@ fieldset.ui-controlgroup { .ui-field-contain fieldset.ui-controlgroup { margin: 0; } +.ui-controlgroup .ui-btn, +.ui-controlgroup .ui-checkbox, +.ui-controlgroup .ui-radio, +.ui-controlgroup .ui-select { + margin: 0; +} +.ui-controlgroup .ui-btn:focus, +.ui-controlgroup .ui-btn.ui-focus { + z-index: 1; +} +.ui-controlgroup li { + list-style: none; +} .ui-controlgroup-horizontal .ui-controlgroup-controls { display: inline-block; vertical-align: middle; @@ -28,17 +41,6 @@ fieldset.ui-controlgroup { .ui-controlgroup-horizontal .ui-select { float: left; clear: none; - margin: 0; -} -.ui-controlgroup .ui-btn { - margin: 0; -} -.ui-controlgroup .ui-btn:focus, -.ui-controlgroup .ui-btn.ui-focus { - z-index: 1; -} -.ui-controlgroup li { - list-style: none; } .ui-controlgroup-horizontal button.ui-btn, .ui-controlgroup .ui-btn-icon-notext { diff --git a/css/structure/jquery.mobile.forms.select.css b/css/structure/jquery.mobile.forms.select.css index f99c82985c8..1c84641c11d 100644 --- a/css/structure/jquery.mobile.forms.select.css +++ b/css/structure/jquery.mobile.forms.select.css @@ -1,5 +1,5 @@ .ui-select { - display: block; + margin: .5em 0; position: relative; } .ui-select > select { @@ -13,6 +13,7 @@ clip: rect(1px,1px,1px,1px); } .ui-select .ui-btn { + margin: 0; opacity: 1; /* Fixes #2588: When Windows Phone 7.5 (Mango) tries to calculate a numeric opacity for a select (including "inherit") without explicitly specifying an opacity on the parent to give it context, a bug appears where clicking elsewhere on the page after opening the select will open the select again. */ } .ui-select .ui-btn select { diff --git a/js/widgets/forms/select.js b/js/widgets/forms/select.js index 70bfa338f69..51e9a5f1a7c 100644 --- a/js/widgets/forms/select.js +++ b/js/widgets/forms/select.js @@ -53,7 +53,9 @@ $.widget( "mobile.selectmenu", $.mobile.widget, $.extend( { // setup items that are generally necessary for select menu extension _preExtension: function() { - var classes = ""; + var inline = this.options.inline || this.element.jqmData( "inline" ), + mini = this.options.mini || this.element.jqmData( "mini" ), + classes = ""; // TODO: Post 1.1--once we have time to test thoroughly--any classes manually applied to the original element should be carried over to the enhanced element, with an `-enhanced` suffix. See https://github.com/jquery/jquery-mobile/issues/3577 /* if ( $el[0].className.length ) { classes = $el[0].className; @@ -66,6 +68,13 @@ $.widget( "mobile.selectmenu", $.mobile.widget, $.extend( { classes = " ui-btn-right"; } + if ( inline ) { + classes += " ui-btn-inline"; + } + if ( mini ) { + classes += " ui-mini"; + } + this.select = this.element.removeClass( "ui-btn-left ui-btn-right" ).wrap( "
" ); this.selectID = this.select.attr( "id" ); this.label = $( "label[for='"+ this.selectID +"']" ); @@ -100,8 +109,6 @@ $.widget( "mobile.selectmenu", $.mobile.widget, $.extend( { options = this.options, - inline = options.inline || this.select.jqmData( "inline" ), - mini = options.mini || this.select.jqmData( "mini" ), iconpos = options.icon ? ( options.iconpos || this.select.jqmData( "iconpos" ) ) : false, // TODO values buttonId and menuId are undefined here @@ -113,10 +120,8 @@ $.widget( "mobile.selectmenu", $.mobile.widget, $.extend( { " ui-shadow-icon" : "" ) ) : "" ) + - ( inline ? " ui-btn-inline" : "" ) + ( options.corners ? " ui-corner-all" : "" ) + - ( options.shadow ? " ui-shadow" : "" ) + - ( mini ? " ui-mini" : "" ) ); + ( options.shadow ? " ui-shadow" : "" ) ); this.setButtonText();