diff options
| author | Scott González <scott.gonzalez@gmail.com> | 2012-04-07 20:40:46 -0400 |
|---|---|---|
| committer | Scott González <scott.gonzalez@gmail.com> | 2012-04-07 20:40:46 -0400 |
| commit | 5ec0dd8abe225e5e1b454d469119e44728ed7727 (patch) | |
| tree | aaa6640f81f347e54cf4cf1cd14d6e0a500bb183 /demos | |
| parent | 9668cb850ef97e39822cb3ef0d0ea27ff0c1fe6e (diff) | |
| download | jquery-ui-5ec0dd8abe225e5e1b454d469119e44728ed7727.tar.gz jquery-ui-5ec0dd8abe225e5e1b454d469119e44728ed7727.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).
(cherry picked from commit 218bd47ecd8066e51d58c1df8fdbf3fa05fac26c)
Conflicts:
demos/autocomplete/combobox.html
Diffstat (limited to 'demos')
| -rw-r--r-- | demos/autocomplete/combobox.html | 44 |
1 files changed, 32 insertions, 12 deletions
diff --git a/demos/autocomplete/combobox.html b/demos/autocomplete/combobox.html index 769dafd57..6fb647c8c 100644 --- a/demos/autocomplete/combobox.html +++ b/demos/autocomplete/combobox.html @@ -12,21 +12,42 @@ <script src="../../ui/jquery.ui.autocomplete.js"></script> <link rel="stylesheet" href="../demos.css"> <style> - .ui-button { margin-left: -1px; } - .ui-button-icon-only .ui-button-text { padding: 0.35em; } - .ui-autocomplete-input { margin: 0; padding: 0.48em 0 0.47em 0.45em; } + .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-autocomplete-input { + margin: 0; + padding: 0.3em; + } </style> <script> (function( $ ) { $.widget( "ui.combobox", { _create: function() { - var self = this, + var input, + self = this, select = this.element.hide(), selected = select.children( ":selected" ), - value = selected.val() ? selected.text() : ""; - var input = this.input = $( "<input>" ) - .insertAfter( select ) + value = selected.val() ? selected.text() : "", + wrapper = $( "<span>" ) + .addClass( "ui-combobox" ) + .insertAfter( select ); + + input = $( "<input>" ) + .appendTo( wrapper ) .val( value ) + .addClass( "ui-state-default" ) .autocomplete({ delay: 0, minLength: 0, @@ -82,10 +103,10 @@ .appendTo( ul ); }; - this.button = $( "<button type='button'> </button>" ) + $( "<a>" ) .attr( "tabIndex", -1 ) .attr( "title", "Show All Items" ) - .insertAfter( input ) + .appendTo( wrapper ) .button({ icons: { primary: "ui-icon-triangle-1-s" @@ -111,8 +132,7 @@ }, destroy: function() { - this.input.remove(); - this.button.remove(); + this.wrapper.remove(); this.element.show(); $.Widget.prototype.destroy.call( this ); } @@ -128,7 +148,7 @@ </script> </head> <body> - + <div class="demo"> <div class="ui-widget"> |