diff options
Diffstat (limited to 'demos/autocomplete')
| -rw-r--r-- | demos/autocomplete/combobox.html | 38 | ||||
| -rw-r--r-- | demos/autocomplete/custom-data.html | 2 | ||||
| -rw-r--r-- | demos/autocomplete/maxheight.html | 2 |
3 files changed, 26 insertions, 16 deletions
diff --git a/demos/autocomplete/combobox.html b/demos/autocomplete/combobox.html index ed457b206..e2ef40dd9 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 = this.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"> diff --git a/demos/autocomplete/custom-data.html b/demos/autocomplete/custom-data.html index c04c6905a..8f6eaa633 100644 --- a/demos/autocomplete/custom-data.html +++ b/demos/autocomplete/custom-data.html @@ -79,7 +79,7 @@ <div class="demo"> <div id="project-label">Select a project (type "j" for a start):</div> - <img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default"> + <img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt=""> <input id="project"> <input type="hidden" id="project-id"> <p id="project-description"></p> diff --git a/demos/autocomplete/maxheight.html b/demos/autocomplete/maxheight.html index 9a2cc96a5..3804249dc 100644 --- a/demos/autocomplete/maxheight.html +++ b/demos/autocomplete/maxheight.html @@ -17,8 +17,6 @@ overflow-y: auto; /* prevent horizontal scrollbar */ overflow-x: hidden; - /* add padding to account for vertical scrollbar */ - padding-right: 20px; } /* IE 6 doesn't support max-height * we use height instead, but this forces the menu to always be this tall |