library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2025-01-07 20:34:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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).

Browse Source 
(cherry picked from commit 218bd47ecd)

Conflicts:

	demos/autocomplete/combobox.html
This commit is contained in:
Scott González 2012-04-07 20:40:46 -04:00
parent 9668cb850e
commit 5ec0dd8abe
1 changed files with 32 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
demos/autocomplete/combobox.html
View File

@ -12,21 +12,42 @@
<script src="../../ui/jquery.ui.autocomplete.js"></script> <script src="../../ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css"> <link rel="stylesheet" href="../demos.css">
<style> <style>
.ui-button { margin-left: -1px; } .ui-combobox {
.ui-button-icon-only .ui-button-text { padding: 0.35em; } position: relative;
.ui-autocomplete-input { margin: 0; padding: 0.48em 0 0.47em 0.45em; } 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> </style>
<script> <script>
(function( $ ) { (function( $ ) {
$.widget( "ui.combobox", { $.widget( "ui.combobox", {
_create: function() { _create: function() {
var self = this, var input,
self = this,
select = this.element.hide(), select = this.element.hide(),
selected = select.children( ":selected" ), selected = select.children( ":selected" ),
value = selected.val() ? selected.text() : ""; value = selected.val() ? selected.text() : "",
var input = this.input = $( "<input>" ) wrapper = $( "<span>" )
.insertAfter( select ) .addClass( "ui-combobox" )
.insertAfter( select );
input = $( "<input>" )
.appendTo( wrapper )
.val( value ) .val( value )
.addClass( "ui-state-default" )
.autocomplete({ .autocomplete({
delay: 0, delay: 0,
minLength: 0, minLength: 0,
@ -82,10 +103,10 @@
.appendTo( ul ); .appendTo( ul );
}; };
this.button = $( "<button type='button'>&nbsp;</button>" ) $( "<a>" )
.attr( "tabIndex", -1 ) .attr( "tabIndex", -1 )
.attr( "title", "Show All Items" ) .attr( "title", "Show All Items" )
.insertAfter( input ) .appendTo( wrapper )
.button({ .button({
icons: { icons: {
primary: "ui-icon-triangle-1-s" primary: "ui-icon-triangle-1-s"
@ -111,8 +132,7 @@
}, },
destroy: function() { destroy: function() {
this.input.remove(); this.wrapper.remove();
this.button.remove();
this.element.show(); this.element.show();
$.Widget.prototype.destroy.call( this ); $.Widget.prototype.destroy.call( this );
} }