Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Controlgroup: applying styling only on the content part, to avoid changes to buttons in the label. Fixed #5352 - Buttons in the controlgroup label #5821

Closed
wants to merge 2 commits into from

3 participants

unknown added some commits
unknown Controlgroup: applying styling only on the content part, to avoid cha…
…nges to buttons in the label. Fixed #5352 - Buttons in the controlgroup label
467d1db
unknown Controlgroup: applying styling only on the content part, to avoid cha…
…nges to buttons in the label. Fixed #5352 - Buttons in the controlgroup label
72151ef
@gseguin
Collaborator

Thank you for the pull request! I noticed that you haven't signed a CLA. Please visit http://contribute.jquery.org/CLA/ and sign it so we can look into your PR.

Thank you.

@jaspermdegroot jaspermdegroot referenced this pull request from a commit
@jaspermdegroot jaspermdegroot Controlgroup: Target buttons inside the controlgroup-controls contain…
…er only. Fixes #5352. Changes from PR #5821 with some modifications. Thanks @aristotelos !
963d895
@jaspermdegroot
Collaborator

@aristotelos

Thanks for this PR! I looked into the issue again and decided that we should make the changes you suggested.
We are making a lot of big changes for 1.4 and are working on this in a branch. Because the CSS file looks completely different there I couldn't merge your PR, but had to apply the changes manually. See 963d895.

I tested this with the markup from the JS Bin that you posted at #5352. Everything looked good. You only have to unset the margin top and bottom of the button that you add to the legend.

Thanks again for your contribution!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Mar 28, 2013
  1. Controlgroup: applying styling only on the content part, to avoid cha…

    unknown authored
    …nges to buttons in the label. Fixed #5352 - Buttons in the controlgroup label
  2. Controlgroup: applying styling only on the content part, to avoid cha…

    unknown authored
    …nges to buttons in the label. Fixed #5352 - Buttons in the controlgroup label
This page is out of date. Refresh to see the latest.
View
40 css/structure/jquery.mobile.controlgroup.css
@@ -8,16 +8,16 @@
.ui-controlgroup-controls label.ui-submit { position: absolute; left: -9999px; }
.ui-controlgroup li { list-style: none; }
-.ui-controlgroup .ui-btn { margin: 0; }
-.ui-controlgroup .ui-btn-icon-notext { width: auto; height: auto; top: auto; }
-.ui-controlgroup .ui-btn-icon-notext .ui-btn-inner { height: 20px; padding: .6em 20px .6em 20px }
-.ui-controlgroup-horizontal .ui-btn-icon-notext .ui-btn-inner { width: 18px; }
-.ui-controlgroup.ui-mini .ui-btn-icon-notext .ui-btn-inner,
-.ui-header .ui-controlgroup .ui-btn-icon-notext .ui-btn-inner,
-.ui-footer .ui-controlgroup .ui-btn-icon-notext .ui-btn-inner { height: 16px; padding: .55em 11px .5em 11px; }
-.ui-controlgroup .ui-btn-icon-notext .ui-btn-inner .ui-icon { position: absolute; top: 50%; right: 50%; margin: -9px -9px 0 0; }
-.ui-controlgroup-horizontal .ui-btn-inner { text-align: center; }
-.ui-controlgroup-horizontal.ui-mini .ui-btn-inner { height: 16px; line-height: 16px; }
+.ui-controlgroup-controls .ui-btn { margin: 0; }
+.ui-controlgroup-controls .ui-btn-icon-notext { width: auto; height: auto; top: auto; }
+.ui-controlgroup-controls .ui-btn-icon-notext .ui-btn-inner { height: 20px; padding: .6em 20px .6em 20px }
+.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-btn-icon-notext .ui-btn-inner { width: 18px; }
+.ui-controlgroup.ui-mini .ui-controlgroup-controls .ui-btn-icon-notext .ui-btn-inner,
+.ui-header .ui-controlgroup .ui-controlgroup-controls .ui-btn-icon-notext .ui-btn-inner,
+.ui-footer .ui-controlgroup .ui-controlgroup-controls .ui-btn-icon-notext .ui-btn-inner { height: 16px; padding: .55em 11px .5em 11px; }
+.ui-controlgroup-controls .ui-btn-icon-notext .ui-btn-inner .ui-icon { position: absolute; top: 50%; right: 50%; margin: -9px -9px 0 0; }
+.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-btn-inner { text-align: center; }
+.ui-controlgroup-horizontal.ui-mini .ui-controlgroup-controls .ui-btn-inner { height: 16px; line-height: 16px; }
.ui-controlgroup .ui-checkbox label, .ui-controlgroup .ui-radio label { font-size: 16px; }
.ui-controlgroup-horizontal .ui-controlgroup-controls:before,
@@ -30,12 +30,12 @@
/* On IE7 the floating selects will be displayed as block if .ui-btn-text has width 100% */
.ui-controlgroup-horizontal .ui-select .ui-btn-text { width: auto; }
-.ui-controlgroup-vertical .ui-btn { border-bottom-width: 0; }
-.ui-controlgroup-vertical .ui-btn.ui-last-child { border-bottom-width: 1px; }
-.ui-controlgroup-horizontal .ui-btn { border-right-width: 0; }
-.ui-controlgroup-horizontal .ui-btn.ui-last-child { border-right-width: 1px; }
+.ui-controlgroup-vertical .ui-controlgroup-controls .ui-btn { border-bottom-width: 0; }
+.ui-controlgroup-vertical .ui-controlgroup-controls .ui-btn.ui-last-child { border-bottom-width: 1px; }
+.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-btn { border-right-width: 0; }
+.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-btn.ui-last-child { border-right-width: 1px; }
-.ui-controlgroup .ui-btn-corner-all {
+.ui-controlgroup-controls .ui-btn-corner-all {
-webkit-border-radius: 0;
border-radius: 0;
}
@@ -47,32 +47,32 @@
-webkit-border-radius: inherit;
border-radius: inherit;
}
-.ui-controlgroup-vertical .ui-btn.ui-first-child {
+.ui-controlgroup-vertical .ui-controlgroup-controls .ui-btn.ui-first-child {
-webkit-border-top-left-radius: inherit;
border-top-left-radius: inherit;
-webkit-border-top-right-radius: inherit;
border-top-right-radius: inherit;
}
-.ui-controlgroup-vertical .ui-btn.ui-last-child {
+.ui-controlgroup-vertical .ui-controlgroup-controls .ui-btn.ui-last-child {
-webkit-border-bottom-left-radius: inherit;
border-bottom-left-radius: inherit;
-webkit-border-bottom-right-radius: inherit;
border-bottom-right-radius: inherit;
}
-.ui-controlgroup-horizontal .ui-btn.ui-first-child {
+.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-btn.ui-first-child {
-webkit-border-top-left-radius: inherit;
border-top-left-radius: inherit;
-webkit-border-bottom-left-radius: inherit;
border-bottom-left-radius: inherit;
}
-.ui-controlgroup-horizontal .ui-btn.ui-last-child {
+.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-btn.ui-last-child {
-webkit-border-top-right-radius: inherit;
border-top-right-radius: inherit;
-webkit-border-bottom-right-radius: inherit;
border-bottom-right-radius: inherit;
}
-.ui-controlgroup .ui-shadow:not(.ui-focus) {
+.ui-controlgroup-controls .ui-shadow:not(.ui-focus) {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
View
4 js/widgets/controlgroup.js
@@ -89,10 +89,10 @@ define( [ "jquery",
},
refresh: function() {
- var els = this.element.find( ".ui-btn" ).not( ".ui-slider-handle" ),
+ var els = this.container().find( ".ui-btn" ).not( ".ui-slider-handle" ),
create = this._initialRefresh;
if ( $.mobile.checkboxradio ) {
- this.element.find( ":mobile-checkboxradio" ).checkboxradio( "refresh" );
+ this.container().find( ":mobile-checkboxradio" ).checkboxradio( "refresh" );
}
this._addFirstLastClasses( els, this.options.excludeInvisible ? this._getVisibles( els, create ) : els, create );
this._initialRefresh = false;
Something went wrong with that request. Please try again.