Question

I’m using Jorn Zaefferer’s Autocomplete query plugin, http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ and I wanted to add a button that will load all the elements the same as combobox.

So, I created a method that puts a div with image as background next to an input text:

var createDownArrow = function (input, request, options) {
    var defaults = {
        downArrowClass: 'autocomplete_DownArrow'
    };
    options = $.extend({}, defaults, options);

    var offset = $(input).offset();
    var width = typeof options.width == 'string' || options.width > 0 ? options.width : $(input).width();
    var element = $('<div/>').addClass(options.downArrowClass).appendTo(document.body).
        css({ position: 'absolute', top: offset.top, left: offset.left + width}).click(function () {
            if (request && typeof request == 'function') {
                request();
            }
        });
};

the input text has the following css:

border: 1px solid #888888;
height:15px;
font-weight: normal;
font-size: 12px;
font-family: Arial (Hebrew);
padding:0px;
margin:0xp;

this is the div css:

   background-image:url(drop.jpg);
    background-position:top right;
    height:17px;
    width:17px;
    cursor:pointer;

and using this function on the input in the html:

<br /><br /><br /><br />
<input type="text" id="test" />

I get the result:

Which you can see is not the desire result.

How can I align the div next to the input? (I am using direction:rtl)

Answer 1

In order to solve this, I canceled the absolute position and added display:inline-block to the div. Then I just inserted in before the input and thats all.