Button markup corners can be string #5241

merged 14 commits into from Nov 2, 2012


None yet

5 participants


This branch contains the implementation of the controlgroup widget, which is a roadmap item. It also fixes a problem that occurs when calling buttonMarup() on a button that is a member of the controlgroup (#3635).



  • controlgroups use ui-btn-corner-all because otherwise the shadows do not line up with the outlines of the buttons. This means that vertical controlgroups, such as the ones of the form

    [ ] checkbox1
    [ ] checkbox2
    [ ] checkbox3

    now look less like listviews, because their corner radii are larger.

  • classes ui-btn-corner-(tl|tr|bl|br|left|top|right|bottom) which have not been referenced from anywhere in our code are now being used




I guess we could special-case the corner radii of buttons inside controlgroups from CSS, to coincide with the ui-corner-* values and then I can change controlgroup back so that it adds ui-corner-all to the outer container, rather than ui-btn-corner-all, and the shadows and border radii will work as before.

jQuery Foundation member

Yeah I was just going to ask about the corner radius. It looks odd to me but that doesn't mean it's wrong.


This change will affect a lot of widgets - grouped checks, radios, etc. We can't special case radii because these are themable CSS properties.

We need to clarify our shadow classes since we have two: in ThemeRoller, we call these "group" and "button" so we should be applying the group class here.


OK, with the new cornerstyle option the group corner style is once again being applied to controlgroup widgets.


BTW: This also fixes #3496 when controlgroup's refresh() method is called after adding new items.


Here's a fixed version of the fiddle from #3496 using this branch: http://jsfiddle.net/JwWpX/19/

@johnbender johnbender commented on an outdated diff Nov 2, 2012
@@ -0,0 +1,106 @@
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Visually groups sets of buttons, checks, radios, etc.
+//>>label: Controlgroups
+//>>group: Forms
+//>>css.structure: ../../css/structure/jquery.mobile.controlgroup.css
+//>>css.theme: ../../css/themes/default/jquery.mobile.theme.css
+define( [ "jquery",
+ "../jquery.mobile.buttonMarkup",
+ "./forms/button",
+ "../jquery.mobile.widget" ], function( $ ) {
+(function( $, undefined ) {
+ function flipClasses( els, flCorners ) {
johnbender Nov 2, 2012

Any reason this can't be on the widget? (nitpick)

@gabrielschulhof gabrielschulhof merged commit abcddc9 into master Nov 2, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment