Drop the position of a jQuery UI Autcomplete dropdown menu by 20 pixels

Question

How do I adjust the position of a UI Autocomplete dropdown menu to lower down by 20 pixels?

I have found one solution that uses the position() method to do so.

The solution suggests (found Solution):

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

which tailored for my case would be:

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

However this does nothing for me.

I don't see offset mentioned in the jquery UI docs for position method either: http://api.jqueryui.com/autocomplete/#option-position

Using jquery-ui-1.10.3

See this fiddle: FIDDLE

Thanks!

Answer 1

THIS is an old question.

A FIDDLE with complex CSS.

But the relevant CSS is:

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