library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-10-05 01:44:18 +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
This commit is contained in:
Scott González 2012-04-07 20:37:12 -04:00
parent 9e9baad46f
commit 218bd47ecd
1 changed files with 27 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
demos/autocomplete/combobox.html
View File

@ -14,25 +14,37 @@
<script src="../../ui/jquery.ui.tooltip.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.ui-button {
margin-left: -1px;
.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'>&nbsp;</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">