library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-10-20 20:44:21 +00:00
Code Issues Actions 2 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

44
demos/autocomplete/combobox.html
View File

@ -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'>&nbsp;</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">