diff options
| author | Scott González <scott.gonzalez@gmail.com> | 2012-04-07 20:37:12 -0400 |
|---|---|---|
| committer | Scott González <scott.gonzalez@gmail.com> | 2012-04-07 20:37:12 -0400 |
| commit | 218bd47ecd8066e51d58c1df8fdbf3fa05fac26c (patch) | |
| tree | fa00f7554ecd364704cb06e4b4851cea5113ea76 | |
| parent | 9e9baad46ffbe88c4a9f2222d0f048fb4183da88 (diff) | |
| download | jquery-ui-218bd47ecd8066e51d58c1df8fdbf3fa05fac26c.tar.gz jquery-ui-218bd47ecd8066e51d58c1df8fdbf3fa05fac26c.zip | |
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).
| -rw-r--r-- | demos/autocomplete/combobox.html | 38 |
1 files changed, 25 insertions, 13 deletions
diff --git a/demos/autocomplete/combobox.html b/demos/autocomplete/combobox.html index ed457b206..2fd55bc29 100644 --- 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'> </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"> |