To bring into line div next to input



Hi all,

Please read and suggest :

made a technique that puts a div with image as backdrop 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 enter text has the subsequent css-

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

div css-

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

trying this function on the input in the html-

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

I’m getting the outcome:

Which clearly is not the desire result.

How to bring into line the div next to the input?

Pls advise thx

48 weeks 5 days ago   Tags: