Select: Add mini and inline classes to container. Set margin on the container. Fixes #5838.

Author: jaspermdegroot

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 {

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 {

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( "<div class='ui-select" + classes + "'>" );
 		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();