Controlgroup: Fixes for spinner

This commit is contained in:
Alexander Schmitz 2015-08-17 08:43:31 -04:00
parent 3330634c4e
commit 50a7a3d6a9
3 changed files with 31 additions and 8 deletions

View File

@ -26,7 +26,6 @@
$( ".controlgroup-vertical" ).controlgroup({ $( ".controlgroup-vertical" ).controlgroup({
"direction": "vertical" "direction": "vertical"
}); });
$( ".button" ).button();
</script> </script>
</head> </head>
<body> <body>
@ -34,7 +33,6 @@
<h1>Controlgroup</h1> <h1>Controlgroup</h1>
<fieldset> <fieldset>
<legend>Rental Car</legend> <legend>Rental Car</legend>
<button class="button">button</button>
<div class="controlgroup"> <div class="controlgroup">
<select id="car-type"> <select id="car-type">
<option>Compact car</option> <option>Compact car</option>

View File

@ -33,8 +33,10 @@
box-sizing: border-box; box-sizing: border-box;
} }
.ui-controlgroup .ui-controlgroup-label { .ui-controlgroup .ui-controlgroup-label {
font-size: .83em; padding: .4em 1em;
padding: .6em 1em; }
.ui-controlgroup .ui-controlgroup-label span {
font-size: 80%;
} }
.ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item { .ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item {
border-left: none; border-left: none;
@ -45,3 +47,23 @@
.ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content { .ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content {
border-right: none; border-right: none;
} }
.ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content {
border-bottom: none;
}
/* Spinner specific style fixes */
.ui-controlgroup-vertical .ui-spinner {
padding-right: .4em;
}
.ui-controlgroup-vertical .ui-spinner-input {
margin: .4em;
padding: 0;
/* Support IE8, Android < 4.4 */
width: 85%;
width: calc( 100% - 22px );
}
.ui-controlgroup-vertical .ui-spinner .ui-spinner-up {
border-top-style: solid;
}

View File

@ -97,6 +97,9 @@ return $.widget( "ui.controlgroup", {
} ); } );
} else if ( selector && widget === "controlgroupLabel" ) { } else if ( selector && widget === "controlgroupLabel" ) {
labels = that.element.find( selector ); labels = that.element.find( selector );
labels.each( function() {
$( this ).contents().wrapAll( "<span class='ui-controlgroup-label-contents'></span>" );
} );
that._addClass( labels, null, "ui-widget ui-widget-content ui-state-default" ); that._addClass( labels, null, "ui-widget ui-widget-content ui-state-default" );
Array.prototype.push.apply( childWidgets, labels.get() ); Array.prototype.push.apply( childWidgets, labels.get() );
} }
@ -117,9 +120,9 @@ return $.widget( "ui.controlgroup", {
}, },
_updateCornerClass: function( element, position ) { _updateCornerClass: function( element, position ) {
var remove = "ui-corner-top ui-corner-bottom ui-corner-left ui-corner-right", var direction = this.options.direction === "vertical"
add = remove = "ui-corner-top ui-corner-bottom ui-corner-left ui-corner-right",
this._buildSimpleOptions( position, this.options.direction, "label" ).classes.label; add = this._buildSimpleOptions( position, direction, "label" ).classes.label;
this._removeClass( element, null, remove ); this._removeClass( element, null, remove );
this._addClass( element, null, add ); this._addClass( element, null, add );
@ -219,7 +222,7 @@ return $.widget( "ui.controlgroup", {
$.each( [ "first", "last" ], function( index, value ) { $.each( [ "first", "last" ], function( index, value ) {
var instance = children[ value ]().data( "ui-controlgroup-data" ); var instance = children[ value ]().data( "ui-controlgroup-data" );
if ( that[ "_" + instance.widgetName + "_options" ] ) { if ( instance && that[ "_" + instance.widgetName + "_options" ] ) {
instance.element[ instance.widgetName ]( instance.element[ instance.widgetName ](
that[ "_" + instance.widgetName + "_options" ]( that[ "_" + instance.widgetName + "_options" ](
value, value,