title: How to anchor dropdown menu in jqGrid jqueryui autocomplete
body: <p>jqGrid textbox contains jQuery UI autocomplete.</p>
  
  <p>I tried to add button to open combocode below based on Oleg great answer in <a href="https://stackoverflow.com/questions/3054811/add-multiple-input-elements-in-a-custom-edit-type-field">Add multiple input elements in a custom edit type field</a> . </p>
  
  <p>If dropdown menu is open and jqgrid is scrolled, dropdown menu position does not change.</p>
  
  <p><img src="https://i.stack.imgur.com/Q5dmD.jpg" alt="dropdown menu does not move with combobox on scroll"></p>
  
  <p>How to anchor dropdown menu to textbox so that it remais in textbox corner on scroll ?</p>
  
  <pre><code>  {"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 = '&lt;div&gt;&lt;input style="width:' + width + 'px" value="' +
   value + '"/&gt;' +
  '&lt;button type="button"  style="height:16px;vertical-align:center" class="ui-icon-triange-1-s" style="margin-left:-1px" tabindex=-1/&gt;&lt;/div&gt;';
  
  var newel = $(elemStr)[0];
  var input = $("input", newel);
  
  input.autocomplete({
      source: 'AutoComplete',
      position: { collision: 'flip flip' }
     } 
  )
  .autocomplete('widget').css('font-size', '12px');
  return newel;
  }
  </code></pre>
  
  <p>index.aspx contains style from <a href="https://stackoverflow.com/questions/3563688/fixed-positioned-search-box-with-autocomplete-suggestions">Fixed positioned search box with Autocomplete suggestions</a>
  but dropdown menu does not move with textbox if jqgrid is scrolled vertically. </p>
  
  <pre><code>&lt;style&gt;
      .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;
      }
  </code></pre>