Autocomplete combobox demo: Fixed styling of button. Fixed #8242 - Autocomplete combobox button has vertical offset relatively to input field (Opera 11.62). Fixed #8243 - Autocomplete combobox button has smaller height than input field (Firefox 11.0).

scottgonzalez · scottgonzalez · commit 218bd47ecd80 · 2012-04-07T20:37:12.000-04:00
diff --git a/demos/autocomplete/combobox.html b/demos/autocomplete/combobox.html
@@ -14,25 +14,37 @@
 	<script src="../../ui/jquery.ui.tooltip.js"></script>
 	<link rel="stylesheet" href="../demos.css">
 	<style>
+	.ui-combobox {
+		position: relative;
+		display: inline-block;
+	}
 	.ui-button {
+		position: absolute;
+		top: 0;
+		bottom: 0;
 		margin-left: -1px;
+		padding: 0;
+		/* adjust styles for IE 6/7 */
+		*height: 1.7em;
+		*top: 0.1em;
 	}
-	.ui-button-icon-only .ui-button-text {
-		padding: 0.35em;
-	} 
 	.ui-autocomplete-input {
 		margin: 0;
-		padding: 0.4em 0 0.4em 0.45em;
+		padding: 0.3em;
 	}
 	</style>
 	<script>
 	(function( $ ) {
 		$.widget( "ui.combobox", {
 			_create: function() {
-				var that = this,
+				var input,
+					that = this,
 					select = this.element.hide(),
 					selected = select.children( ":selected" ),
-					value = selected.val() ? selected.text() : "";
+					value = selected.val() ? selected.text() : "",
+					wrapper = $( "<span>" )
+						.addClass( "ui-combobox" )
+						.insertAfter( select );
 
 				function removeIfInvalid(element) {
 					var value = $( element ).val(),
@@ -59,10 +71,11 @@
 					}
 				}
 
-				var input = this.input = $( "<input>" )
-					.insertAfter( select )
+				input = $( "<input>" )
+					.appendTo( wrapper )
 					.val( value )
 					.attr( "title", "" )
+					.addClass( "ui-state-default" )
 					.autocomplete({
 						delay: 0,
 						minLength: 0,
@@ -103,11 +116,11 @@
 						.appendTo( ul );
 				};
 
-				this.button = $( "<button type='button'>&nbsp;</button>" )
+				$( "<a>" )
 					.attr( "tabIndex", -1 )
 					.attr( "title", "Show All Items" )
 					.tooltip()
-					.insertAfter( input )
+					.appendTo( wrapper )
 					.button({
 						icons: {
 							primary: "ui-icon-triangle-1-s"
@@ -142,8 +155,7 @@
 			},
 
 			destroy: function() {
-				this.input.remove();
-				this.button.remove();
+				this.wrapper.remove();
 				this.element.show();
 				$.Widget.prototype.destroy.call( this );
 			}
@@ -159,7 +171,7 @@
 	</script>
 </head>
 <body>
-	
+
 <div class="demo">
 
 <div class="ui-widget">
