Question

I’ve got a frustrating issue with Jquery auto-complete. I have UL of drop down options which appears beneath the input. The ui-menu and ui-menu-items are being rendered with width:1214px – I assume this is document width or something. I don’t know why this happens, but I can overwrite the CSS to fix it.

Fixing the width causes line breaks in the result list, which is fine. The limited result list still easily fits on the page but for some reason the page height is thrown off and I get a vertical scroll bar.

All the ul and li heights are set to auto in the DOM explorer- why does it cause the page to scroll?

What workarounds are there to keep the autocomplete box inside the lines?

CSS:

.ui-menu {
  ...
  width:245px;
}
.ui-menu-item{
  cursor:pointer;
  list-style: none;
  ...
  width:245px;
}

JS:

$.ui.autocomplete.prototype._renderMenu = function( ul, items ) {
  var self = this;
  $.each( items, function( index, item ) {
    if (index < 10)
      {self._renderItem( ul, item );}
  });
}

Input:

<input type="text" class="Search" id="search_box"/>

Answer 1

Try to set/overwrite the z-index of the list that drops down on search:

z-index:999 or z-index:1000

I am not sure but it could help. Another solution would be to set the overflow to hidden when user is searching:

So as soon as the user clicks on the input field:

$("html,body").css("overflow","hidden");

And when the input field looses focus:

$("html,body").css("overflow","auto");

However this seems strange to me because jQuery UI should work properly.