How to anchor dropdown menu in jqGrid jqueryui autocomplete

Question

jqGrid textbox contains jQuery UI autocomplete.

I tried to add button to open combocode below based on Oleg great answer in Add multiple input elements in a custom edit type field .

If dropdown menu is open and jqgrid is scrolled, dropdown menu position does not change.

How to anchor dropdown menu to textbox so that it remais in textbox corner on scroll ?

  {"name":"Custtype","edittype":"custom","maxlength":15,
  "editoptions":  {"custom_element":function(value, options) {
return combobox_element(value, options,'24','Klliik0_nimetus','Klient')}
,"custom_value":function(elem, operation, value) {
      return $("input", $(elem)[0]).val();
}
}
 }

function combobox_element(value, options, width) {
 var elemStr = '<div><input style="width:' + width + 'px" value="' +
 value + '"/>' +
'<button type="button"  style="height:16px;vertical-align:center" class="ui-icon-triange-1-s" style="margin-left:-1px" tabindex=-1/></div>';

var newel = $(elemStr)[0];
var input = $("input", newel);

input.autocomplete({
    source: 'AutoComplete',
    position: { collision: 'flip flip' }
   } 
)
.autocomplete('widget').css('font-size', '12px');
return newel;
}

index.aspx contains style from Fixed positioned search box with Autocomplete suggestions but dropdown menu does not move with textbox if jqgrid is scrolled vertically.

<style>
    .ui-autocomplete
    {
        max-height: 300px;
        overflow-y: auto; /* prevent horizontal scrollbar */
        overflow-x: hidden; /* add padding to account for vertical scrollbar */
        padding-right: 20px;

        z-index: 99999;
        position: fixed;
        top: 0px;
        margin: 20px 0px 0px 0px; /* The top margin defines the offset of textbox */
    }

    /* IE 6 doesn't support max-height
 * we use height instead, but this forces the menu to always be this tall
 */
    * html .ui-autocomplete
    {
        height: 100px;
    }