ASP.NET - gridview headers hiding jquery ui autocomplete results

Asked By John Smith on 07-May-12 11:44 AM
Earn up to 20 extra points for answering this tough question.
So I have a texbox that returns results using jQuery UI autocomplete. The textbox sits atop a gridview. When the results are returned they appear in front of the gridview rows, but behind the gridview row headers. How can I solve this? Thanks.
Jitendra Faye replied to John Smith on 08-May-12 12:44 AM
For this set your search result position like this-

ul.ui-autocomplete
{
    position
: absolute;
   

}


TRy this and let me know.
Somesh Yadav replied to John Smith on 08-May-12 02:14 AM
try this,

http://www.aspdotnet-suresh.com/2012/03/jquery-ui-autocomplete-textbox-with.html

hope it helps you.
[)ia6l0 iii replied to John Smith on 09-May-12 01:15 PM
There are multiple options. 

a) You can set the z-index of the ui-autocomplete div to a high number with the position being absolute, and using important tag.
 .ui-autocomplete
{
      position:absolute;
      z-index:9999 !important
}


b) You can use the Open and close function and set appropriate z-indexes for the ui-slider-handle.
$( "#controlname" ).autocomplete({
   ...   
  open: function(event, ui) { $(".ui-slider-handle").css("z-index", -1); },
  close: function(event, ui) { $(".ui-slider-handle").css("z-index", 9999); }
  ...
});

Hope this helps.
John Smith replied to [)ia6l0 iii on 09-May-12 01:59 PM

[)@6l0 iii,


CSS was indeed both the culprit and the answer to the problem. I was using CSS to style the gridview headers, and had them set to be on a higher level than the autocomplete results. Once I adjusted the CSS then I was able to get the results to appear as intended.

Thanks for the reply, and thanks to all that replied.