Controlgroup: Target buttons inside the controlgroup-controls container only. Fixes #5352. Changes from PR #5821 with some modifications. Thanks @aristotelos !

Author: jaspermdegroot

css/structure/jquery.mobile.controlgroup.css

@@ -8,17 +8,17 @@ 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 {
+.ui-controlgroup-controls .ui-btn,
+.ui-controlgroup-controls .ui-checkbox,
+.ui-controlgroup-controls .ui-radio,
+.ui-controlgroup-controls .ui-select {
 	margin: 0;
 }
-.ui-controlgroup .ui-btn:focus,
-.ui-controlgroup .ui-btn.ui-focus {
+.ui-controlgroup-controls .ui-btn:focus,
+.ui-controlgroup-controls .ui-btn.ui-focus {
 	z-index: 1;
 }
-.ui-controlgroup li {
+.ui-controlgroup-controls li {
 	list-style: none;
 }
 .ui-controlgroup-horizontal .ui-controlgroup-controls {
@@ -36,46 +36,46 @@ fieldset.ui-controlgroup {
 }
 .ui-controlgroup-horizontal .ui-controlgroup-controls > .ui-btn,
 .ui-controlgroup-horizontal .ui-controlgroup-controls li > .ui-btn,
-.ui-controlgroup-horizontal .ui-checkbox,
-.ui-controlgroup-horizontal .ui-radio,
-.ui-controlgroup-horizontal .ui-select {
+.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-checkbox,
+.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-radio,
+.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-select {
 	float: left;
 	clear: none;
 }
-.ui-controlgroup-horizontal button.ui-btn,
-.ui-controlgroup .ui-btn-icon-notext {
+.ui-controlgroup-horizontal .ui-controlgroup-controls button.ui-btn,
+.ui-controlgroup-controls .ui-btn-icon-notext {
 	width: auto;
 }
-.ui-controlgroup-horizontal .ui-btn-icon-notext,
-.ui-controlgroup-horizontal button.ui-btn-icon-notext {
+.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-btn-icon-notext,
+.ui-controlgroup-horizontal .ui-controlgroup-controls button.ui-btn-icon-notext {
 	width: 1.5em;
 }
-.ui-controlgroup .ui-btn-icon-notext {
+ .ui-controlgroup-controls .ui-btn-icon-notext {
 	height: auto;
 	padding: .7em 1em;
 }
-.ui-controlgroup-vertical .ui-btn {
+.ui-controlgroup-vertical .ui-controlgroup-controls .ui-btn {
 	border-bottom-width: 0;
 }
-.ui-controlgroup-vertical .ui-btn.ui-last-child {
+.ui-controlgroup-vertical .ui-controlgroup-controls .ui-btn.ui-last-child {
 	border-bottom-width: 1px;
 }
-.ui-controlgroup-horizontal .ui-btn {
+.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-btn {
 	border-right-width: 0;
 }
-.ui-controlgroup-horizontal .ui-btn.ui-last-child {
+.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-btn.ui-last-child {
 	border-right-width: 1px;
 }
-.ui-controlgroup .ui-btn-corner-all,
-.ui-controlgroup .ui-btn.ui-corner-all {
+.ui-controlgroup-controls .ui-btn-corner-all,
+.ui-controlgroup-controls .ui-btn.ui-corner-all {
 	-webkit-border-radius: 0;
 	border-radius: 0;
 }
-.ui-controlgroup .ui-controlgroup-controls,
-.ui-controlgroup .ui-radio,
-.ui-controlgroup .ui-checkbox,
-.ui-controlgroup .ui-select,
-.ui-controlgroup li {
+.ui-controlgroup-controls,
+.ui-controlgroup-controls .ui-radio,
+.ui-controlgroup-controls .ui-checkbox,
+.ui-controlgroup-controls .ui-select,
+.ui-controlgroup-controls li {
 	-webkit-border-radius: inherit;
 	border-radius: inherit;
 }
@@ -103,9 +103,9 @@ fieldset.ui-controlgroup {
 	-webkit-border-bottom-right-radius: inherit;
 	border-bottom-right-radius: inherit;
 }
-.ui-controlgroup a.ui-shadow:not(:focus),
-.ui-controlgroup button.ui-shadow:not(:focus),
-.ui-controlgroup div.ui-shadow:not(.ui-focus) {
+.ui-controlgroup-controls a.ui-shadow:not(:focus),
+.ui-controlgroup-controls button.ui-shadow:not(:focus),
+.ui-controlgroup-controls div.ui-shadow:not(.ui-focus) {
 	-moz-box-shadow: none;
 	-webkit-box-shadow: none;
 	box-shadow: none;

js/widgets/controlgroup.js

@@ -82,7 +82,7 @@ $.widget( "mobile.controlgroup", $.mobile.widget, $.extend( {
 	},
 
 	refresh: function() {
-		var $el = this.element,
+		var $el = this.container(),
 			els = $el.find( ".ui-btn" ).not( ".ui-slider-handle" ),
 			create = this._initialRefresh;
 		if ( $.mobile.checkboxradio ) {