jQuery autocomplete : move list position?

Question

I am wondering if it is possible for me to move the dropdown list down 4px?

I have tried several styles in .ui-autocomplete {}.

including:

margin-top: 4px;
top: 4px

but it does not seem to be working?

Answer 1

This is what the offset property of the position option is for:

$('#myField').autocomplete({
    source: …,
    position: {
        offset: '0 4' // Shift 0px left, 4px down.
    }
});

Answer 2

The accepted answer is no longer valid because the offset option was deprecated in jQuery UI v1.9 and completely removed in v1.10:

The offset option has been deprecated and offsets have been merged into the my and at options. The form for a position is now the named position, optionally followed by a plus or minus and then an offset. In addition, offsets now support percentages (see above). You should replace all uses of the offset option with offsets placed inside the my and/or at options.

You should now write:

$(".my-autocomplete-field").autocomplete({
    position: {
        my: "left+0 top+4",
    }
});

Answer 3

Try

.ui-autocomplete {
     margin-top: 20px !important;
     top: 0px !important;
}

Or try

.ui-autocomplete {
     margin-top: 20px !important;
     top: auto !important;
}

See a demo:

• http://www.jsfiddle.net/xvVKW/1/
• http://www.jsfiddle.net/xvVKW/3/

Answer 4

Can't say off the top of my head but it depends what the existing css is...

if the position is absolute then the margin won't effect the box... What you could do is get the resulting div $('.ui-autocomplete') then add 4px to the element's position.

It will either be:

$('.ui-autocomplete').css('bottom') or $('.ui-autocomplete').css('top')

Get the value of both of these and change them around, see what happens :)